使用 appcelerator 中的模板将元素添加到列表视图
adding elements to listview using templates in appcelerator
这是我的 .xml 文件,用于创建列表视图并使用 appcelerator 中的模板向其中添加元素。如何设置 .tss 文件中列表项内容的样式。例如。我希望图片在最左边,标题在中间,下面是日期和 url.
<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>
使用对象的 ID place/style 项目。例如在你的 tss:
"#iconId" : {left : 5},
"#titleId" : {left: 100},
"#dateId" : {left: 100},
"#urlId" : {left: 100}
您可以根据需要进行调整。
请参阅 ListView documentation 中的 Alloy XML 标记 部分。并注意示例 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'
}
这是我的 .xml 文件,用于创建列表视图并使用 appcelerator 中的模板向其中添加元素。如何设置 .tss 文件中列表项内容的样式。例如。我希望图片在最左边,标题在中间,下面是日期和 url.
<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>
使用对象的 ID place/style 项目。例如在你的 tss:
"#iconId" : {left : 5},
"#titleId" : {left: 100},
"#dateId" : {left: 100},
"#urlId" : {left: 100}
您可以根据需要进行调整。
请参阅 ListView documentation 中的 Alloy XML 标记 部分。并注意示例 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'
}