Table 视图推到屏幕顶部

Question

将 tableView 添加到其他项目（图像、字段、文本等）下方的视图中，table 将其他项目推出屏幕。

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

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

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

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

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

你能做什么：

将 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();

Table 视图推到屏幕顶部

Table view pushes to top of screen

android

titanium

appcelerator

appcelerator-titanium