HarmonyOS List的divider使用

默认情况下,第一个listitem的上方和最后一个的下方是没有分割线的 在此基础上,我是否可以设置第一个的下方和第二个的下方也没有分割线吗?

HarmonyOS
2024-09-02 11:15:49
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

想实现您想要的效果,只能使用自定义ListItem结合条件渲染,参考代码如下:

@Entry 
@Component 
struct ListDividePage { 
  @State message: string = 'Hello World'; 
  scroller: Scroller = new Scroller() 
  @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('#0D182431') 
    .width('100%') 
    .height('100%') 
  } 
} 
 
@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 
}
分享
微博
QQ
微信
回复
2024-09-02 17:35:04
相关问题
List组件divider颜色显示透List组件颜色
188浏览 • 0回复 待解决
Divider组件是否存在虚线属性
355浏览 • 1回复 待解决
List及ListItem组件使用
1384浏览 • 1回复 待解决
list 如何使用 lazyforeach
169浏览 • 1回复 待解决
List使用问题有哪些?
209浏览 • 1回复 待解决
Divider组件如何设置分割线宽度
2566浏览 • 1回复 待解决
HarmonyOS List展示不全问题
94浏览 • 1回复 待解决
使用List组件设置多列布局方式
292浏览 • 1回复 待解决
HarmonyOS如何拦截list滑动事件?
179浏览 • 1回复 待解决
使用List lazyForeach时,reuseId未生效
230浏览 • 1回复 待解决
使用List嵌套实现表格布局
851浏览 • 1回复 待解决
使用List组件实现多列布局
386浏览 • 1回复 待解决
HarmonyOS list中item交互效果处理
187浏览 • 1回复 待解决
HarmonyOS如何去掉List组件滑动线
547浏览 • 1回复 待解决
HarmonyOS listitem如何保存状态
181浏览 • 2回复 待解决
HarmonyOS list编辑移动效果
106浏览 • 1回复 待解决
HarmonyOS listitem支持托动效果吗?
131浏览 • 1回复 待解决
ArkTS UIList和集合List冲突问题
62浏览 • 1回复 待解决