HarmonyOS 鸿蒙Next List + divider？
HarmonyOS 鸿蒙Next List + divider？
咱们具体的疑问点是什么呢，附list的divider demo
[@Entry](/user/Entry)
[@Component](/user/Component)
struct ListDividePage {
[@State](/user/State) message: string = 'Hello World';
scroller: Scroller = new Scroller()
[@State](/user/State) dataSource: Array<ListItemModel> = new Array()
aboutToAppear(): void {
let index = 0;
while (index<50){
this.dataSource.push({“title”:index.toString(),“showLine”:index%2 == 0})
index++
}
}
build() {
Column() {
List({ scroller: this.scroller }) {
ForEach(this.dataSource, (item: ListItemModel) => {
ListItem() {
ListItemView({ item: item })
}
}, (item: ListItemModel) => item.title)
}.scrollBar(BarState.Off)
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
})
}
.backgroundColor(<span class="hljs-string">'#0D182431'</span>)
.width(<span class="hljs-string">'100%'</span>)
.height(<span class="hljs-string">'100%'</span>)
}
}
@Component
struct ListItemView {
item: ListItemModel = new ListItemModel();
build() {
Column(){
Text(“item” + this.item.title)
.fontSize(16)
.fontColor(Color.Black)
.height(80)
.width(“100%”)
.textAlign(TextAlign.Center).backgroundColor(Color.White)
if (this.item.showLine){
Divider().strokeWidth(1).color(Color.Red)
}
}.width(“100%”).height(81).borderRadius(10).backgroundColor(Color.White).justifyContent(FlexAlign.SpaceBetween)
}
}
class ListItemModel {
constructor() {
}
title: string = “”
showLine: boolean = false
}
在HarmonyOS鸿蒙Next中，List组件是一个常用的UI元素，用于展示同类数据类型或数据集。关于List组件与divider（分隔线）的使用，以下是一些专业解答：
List组件可以通过设置相关属性来实现不同的展示效果，包括添加分隔线。在HarmonyOS中，List组件支持使用divider属性来定义每行之间的分界线。你可以通过设置divider的strokeWidth（线条宽度）、color（颜色）、startMargin（起始边距）和endMargin（结束边距）等参数来自定义分隔线的样式。
例如，在List组件中，你可以这样设置divider属性：
List({space: 10}) {
// List items here
.divider({
strokeWidth: 2,
color: 0xFFFFFF,
startMargin: 20,
endMargin: 20
})
}
这段代码会在List组件的每个项目之间添加一条宽度为2、颜色为白色、边距为20的分隔线。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
