表格视图推到屏幕顶部

Question

将 tableView 添加到其他项目（图像、字段、文本等）下方的视图中，并且表格会将其他项目推离屏幕。

在以下示例中，我将标签添加到视图，然后将表添加到视图。然后将视图添加到窗口中。表格的顶部会将标签推离屏幕顶部。如果我向下滑动，它就在那里。

还有其他人看过吗？我错过了什么吗？

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
	layout : 'vertical',
});

var tableData = [{
	title : 'Apples'
}, {
	title : 'Bananas'
}, {
	title : 'Carrots'
}, {
	title : 'Potatoes'
}, {
	title : 'Apples'
}, {
	title : 'Bananas'
}, {
	title : 'Carrots'
}, {
	title : 'Potatoes'
}, {
	title : 'Apples'
}, {
	title : 'Bananas'
}, {
	title : 'Carrots'
}, {
	title : 'Potatoes'
}, {
	title : 'Apples'
}, {
	title : 'Bananas'
}, {
	title : 'Carrots'
}, {
	title : 'Potatoes'
}];

var view = Ti.UI.createScrollView({
	backgroundColor : 'transparent',
	top : 0,
	left : 0,
	width : 'auto',
	height : Titanium.UI.SIZE,
	layout : 'vertical',
	id : 'mainView',
});

var label1 = Ti.UI.createLabel({
	color : 'white',
	text : 'I am label 1',
	font : {
		fontSize : 50,
	},
	top : 0,
});
view.add(label1);

var table = Ti.UI.createTableView({
	data : tableData,
	top : 0
});

view.add(table);
win.add(view);
win.open();

Answer 1

你看到的是正确的。不要混合滚动视图（表格视图会自动滚动）。您看到的是：您将标签添加到滚动视图中，然后将表格（高度 100%）添加到同一个滚动视图中。所以你有标签高度 + 100% 并且标签移动到视口之外。

现在，当您滚动时，您将首先移动 tableview，当它一直向上滚动时，滚动视图会滚动，您将再次看到您的标签。

你可以做什么：

把createScrollView改成普通的createView

或

将标签添加为 TableViewRow（您可以在每一行内创建自定义布局，使其看起来像标题）

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
    layout: 'vertical',
});

var tableData = [{
    title: 'Apples'
}, {
    title: 'Bananas'
}, {
    title: 'Carrots'
}, {
    title: 'Potatoes'
}, {
    title: 'Apples'
}, {
    title: 'Bananas'
}, {
    title: 'Carrots'
}, {
    title: 'Potatoes'
}, {
    title: 'Apples'
}, {
    title: 'Bananas'
}, {
    title: 'Carrots'
}, {
    title: 'Potatoes'
}, {
    title: 'Apples'
}, {
    title: 'Bananas'
}, {
    title: 'Carrots'
}, {
    title: 'Potatoes'
}];

var view = Ti.UI.createView({
    backgroundColor: 'transparent',
    top: 0,
    left: 0,
    width: 'auto',
    height: Titanium.UI.FILL,
    layout: 'vertical',
    id: 'mainView',
});

var label1 = Ti.UI.createLabel({
    color: 'white',
    text: 'I am label 1',
    font: {
        fontSize: 50,
    },
    top: 0,
    height:Ti.UI.SIZE
});
view.add(label1);

var table = Ti.UI.createTableView({
    data: tableData,
    top: 0
});

view.add(table);
win.add(view);
win.open();

第二个例子

Ti.UI.backgroundColor = '#000';
var win = Ti.UI.createWindow({
    layout: 'vertical',
});



var tableData = [];

function createHeadline(txt) {
    var label1 = Ti.UI.createLabel({
        color: 'white',
        text: txt,
        font: {
            fontSize: 50,
        },
        height: Ti.UI.SIZE
    });
    var r1 = Ti.UI.createTableViewRow({
        height: Ti.UI.SIZE
    });
    var v1 = Ti.UI.createView({
        height: Ti.UI.SIZE,
        width: Ti.UI.FILL,
    });
    v1.add(label1);
    r1.add(v1);
    tableData.push(r1);
}

function createRow(txt) {
    var r1 = Ti.UI.createTableViewRow({
        height: Ti.UI.SIZE
    });
    var v1 = Ti.UI.createView({
        height: 40,
        width: Ti.UI.FILL,
    });
    var label1 = Ti.UI.createLabel({
        color: 'white',
        text: txt,
        font: {
            fontSize: 18,
        },
        height: Ti.UI.SIZE
    });
    v1.add(label1);
    r1.add(v1);
    tableData.push(r1);
}

createHeadline("Label 1");
createRow("text")
createRow("text")
createRow("text")
createRow("text")
createRow("text")
createRow("text")
createHeadline("Label 2");
createRow("text")
createRow("text")
createRow("text")
createRow("text")
createRow("text")

var table = Ti.UI.createTableView({
    data: tableData,
    top: 0
});

win.add(table);
win.open();