Appcelerator 合金自定义列表视图项目布局不起作用？

Question

我按照以下示例创建了一个列表视图 http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_ListView_Guide

视图xml如下，

<ListView id="elementsList" defaultItemTemplate="elementTemplate">
    <Templates>
        <ItemTemplate name="elementTemplate">
            <Label bindId="symbol" id="symbol" />
            <View id="atomProperties">
                <Label bindId="name" id="name" />
                <View id="secondLine">
                    <Label class="line2 fieldLabel" text="Number: " />
                    <Label class="line2" bindId="number" id="number" />
                    <Label class="line2 fieldLabel" text="Atomic Mass: " />
                    <Label class="line2" bindId="mass" id="mass" />
                </View>
            </View>
            <ImageView bindId="image" id="image" />
        </ItemTemplate>
    </Templates>
    <ListSection>
        <ListItem symbol:text="H" symbol:color="#090" name:text="Hydrogen" number:text="1" mass:text="1.00794"/>
        <ListItem symbol:text="He" symbol:color="#090" name:text="Helium" number:text="2" mass:text="4.002602"/>
        <ListItem symbol:text="Li" name:text="Lithium" number:text="3" mass:text="6.941"/>
    </ListSection>
</ListView>     

tss如下，

"#symbol": {
    left: 15,
    color: "black",
    font: { fontSize: 34, fontWeight: 'bold' }
},
"#symbol[platform=android]": {
    left: 0
}
"#atomProperties": {
    top: 0, left: 80, right: 0, bottom: 0,
    layout: "vertical"
},
"#atomProperties[platform=android]": {
    left: 65
},
"#name": {
    left: 0, top: 4,
    color: "black",
    textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
    font: { fontSize: 16 }
},
"#secondLine": {
    left: 0, right: 0,
    layout: "horizontal"
},
".fieldLabel": {
    color:"#999"
},
".line2": {
    font: { fontSize: 10 }
},
"#number": {
    width: 30,
    color: 'red'
},
"#mass": {
    color: "blue"
}

我需要在名称旁边添加一个右对齐的时间标签，并且我还需要标签质量是右对齐的。所以我在名字下面加了一个时间标签

<Label bindId="name" id="name" />
<Label bindId="time" id="time" />

然后我添加一个 tss

"#time": {
    right: 0, top: 4,
    color: "black",
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
    font: { fontSize: 12 }
}

时间标签是正确的，但它会出现在名称标签下方。我如何使它与名称相同？

并且我想将质量标记为正确对齐，因此我将其更改为

"#mass": {
    color: "blue",
    right: 0,
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT
}

但它不起作用，标签质量仍然不合理。我如何使它正确合理？

基本上，我希望我的列表视图项布局看起来像这样

姓名            时间 象征 数量           质量

Answer 1

我会让 ItemTemplate 具有水平布局。符号标签首先带有左间距（您可能还需要使用 height 和 verticalAlign 来获得正确的对齐）。二是垂直布局的视图，包括名称和编号；此处的左侧设置是与符号的边距间距。三是垂直布局的视图，包括时间和质量；此处的左侧设置是名称/编号视图的边距。您可能需要为数量和质量添加顶部间距以获得所需的效果。下面的伪代码：

<ItemTemplate layout="horizontal">
    <Label text="Symbol" left="0"></Label>
    <View left="10" layout="vertical">
        <Label text="name">
        <Label text="number">
    </View>
    <View left="10" layout="vertical">
        <Label text="time">
        <Label text="mass">
    </View>
</ItemTemplate>