HarmonyOS .divider(this.egDivider) 如何在列表最后一个元素下面也加上一条分割线

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以使用自定义ListItem结合条件渲染,参考代码如下:

@Entry
@Component
struct Index {
  @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": true })
      index++
    }
  }

  build() {
    Column() {
      List({ scroller: this.scroller }) {
        ForEach(this.dataSource, (item: ListItemModel) => {
          ListItem() {
            ListItemView({ item: item })
          }
        }, (item: ListItemModel) => item.title)
      }.scrollBar(BarState.Off)
      .onWillScroll((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 = true
}
分享
微博
QQ
微信
回复
1天前
相关问题
Divider组件如何设置分割线宽度
3002浏览 • 1回复 待解决
HarmonyOS 如何实现分割线拖拽?
132浏览 • 1回复 待解决
HarmonyOS Grid如何设置分割线
201浏览 • 1回复 待解决
如何设置TabBar和TabContent的分割线样式
2450浏览 • 1回复 待解决
如果让分割线垂直起来
6051浏览 • 1回复 待解决
List如何设置分割线左右的边距?
603浏览 • 1回复 待解决
HarmonyOS 如何绘制一条虚线
173浏览 • 1回复 待解决
HarmonyOS GridItem之间有一条竖线
16浏览 • 1回复 待解决
HarmonyOS list最后一个显示不出来
172浏览 • 1回复 待解决