使用appcelerator中的模板向listview添加元素

时间:2017-06-30 14:50:22

标签: listview appcelerator

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

请参阅ListView documentation中的 Alloy XML Markup 部分。并注意样本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'
}