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 
} 

但它不会工作，标签质量仍然没有道理的。我如何使其正确？

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

 
        name             time 
SYMBOL 
        number           mass 

Answer 1

我会做ItemTemplate中有水平布局。符号标签首先用左间距（您可能还需要玩高度和verticalAlign以获得正确的对齐）。其次是包含名称和编号的垂直布局视图;这里的左边设置是符号的边距。第三种是垂直布局，包括时间和质量;这里的左边设置是距离名称/编号视图的边距。您可能需要为数量和质量添加顶部间距以获得您想要的效果。下面伪ISH-代码：

<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>