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>