components - 如何将组件按行宽度均匀分布？

Question

我正在使用 Appcelerator Titanium，并且想要制作一个 Android 应用程序。我创建了一个包含 4 行的 TableView。我想在每行中放入 3 个标签，并且我希望标签均匀分布。 (第一个标签必须位于该行的左侧，第二个标签必须位于中间，第三个标签必须位于该行的右侧。) 谢谢。

Answer 1

对于左、中、右，您可以使用相对定位和文本对齐来非常简单地制作行。无论当前屏幕有多宽，这种方法都很有效(即，这适用于平板电脑、手机、电视等)。

var win = Ti.UI.createWindow({
    backgroundColor: '#fff'
});

var rows = [];

for (var i = 0; i < 10; i++) {
    var row = Ti.UI.createTableViewRow();
    row.add(Ti.UI.createLabel({
        text: 'Left ' + i, textAlign: 'left',
        color: '#000',
        left: 10
    }));
    row.add(Ti.UI.createLabel({
        text: 'Center ' + i, textAlign: 'center',
        color: '#000'
    }));
    row.add(Ti.UI.createLabel({
        text: 'Right ' + i, textAlign: 'right',
        color: '#000',
        right: 10
    }));
    rows.push(row);
}

win.add(Ti.UI.createTableView({
    data: rows
}));

win.open();

另一种选择是使用百分比宽度，例如 left: '0%', width: '33%'，然后 left: '33%', width: '33% ' 等

或者你可以说第一个标签来自left: 0, width: 200。第二个是 left: 200, width: 50，第三个是 left: 250, right: 0。这将为您提供第三个有弹性的标签，因此它可以占据所有空间。

另一种选择(我不建议您采用)是使用 Ti.Platform.displayCaps.platformWidth 并据此定位行元素。但这对于方向变化来说非常脆弱。

这完全取决于您的内容。有了这些，您应该能够处理您的特定用例。