2017-06-30 114 views
0

这是用于创建列表视图并使用appcelerator中的模板添加元素的.xml文件。如何设置.tss文件中列表项中的内容的样式。例如。我希望图像位于最左边,标题位于下面的中间,这将是日期和网址。使用应用程序中的模板向listview添加元素

<Alloy> 
     <Window id="win2" class="container"> 
      <View id = "v1" class ="view1" layout ="horizontal" > 
       <Button class="btnBack" ></Button> 
       <Label class = "label1">List</Label> 
      </View> 
      <View class="view2"> 
       <TextField id = "txtSearch"></TextField> 
      </View> 
      <ListView id = "lView" class = "list1" > 
       <Templates> 
        <ItemTemplate name="template"> 
         <ImageView bindId="pic" id="iconId" /> 
         <Label bindId="info" id="titleId" /> 
         <Label bindId="date" id="dateId" /> 
         <Label bindId="url" id ="urlId" /> 
        </ItemTemplate> 
       </Templates> 
<ListSection> 
         <ListItem pic:image="/Images/abstract-logo-with-colorful-leaves_1025-695.jpg" info:text ="This is the title" date:text= "6/30/2017" url:tex ="https://youtu.be/zkOSR0ZRb9k"></ListItem> 
        </ListSection> 
      </ListView> 

     </Window> 
    </Alloy> 

回答

0

查看合金XML标记中的ListView documentation部分。并注意示例index.tss如何通过参数id引用ItemTemplate中的每个控件。这个例子非常接近你想要完成的事情:

"#icon" : { 
    width: '50dp', height: '50dp', left: 0 
}, 
"#title" : { 
    color: 'black', 
    font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' }, 
    left: '60dp', top: 0 
}, 
"#subtitle" : { 
    color: 'gray', 
    font: { fontFamily:'Arial', fontSize: '14dp' }, 
    left: '60dp', top: '25dp' 
} 
0

使用对象的ID来放置/设置项目的样式。例如在你的tss:

"#iconId" : {left : 5}, 
"#titleId" : {left: 100}, 
"#dateId" : {left: 100}, 
"#urlId" : {left: 100} 

你可以根据需要进行调整。

+0

我的男人雷甚至为你设定了造型! –

相关问题