Question

我按照示例创建了一个listview 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
}

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

基本上，我希望我的listview项目布局看起来像这样

        name             time
SYMBOL
        number           mass

Answer 1

我会让ItemTemplate具有水平布局。符号标签首先使用左侧间距（您可能还需要使用高度和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>

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

1 个答案: