HarmonyOS list的divider bug

@Builder
listBuilder() {
  List({ scroller: this.scroller }) {
    ForEach(this.data, (item: TopicItem, index) => {
      ListItem() {
        Row() {
          RoundImageView({ imageUrl: item.imageUrl, defaultSize: 58, defaultRadius: 8 })
          Column() {
            Text(`#${item.name}`).fontSize(15)
            Text(`共${item.size}条动态`).fontSize(12).fontColor(default_gray100).margin({ top: 6 })
          }.layoutWeight(1).margin({ left: 12, right: 12 }).alignItems(HorizontalAlign.Start)

          Image($r('app.media.icon_next')).width(18).aspectRatio(1)
        }
        .height(70)
        .backgroundColor(white)
        .width("100%")
        .padding({ left: 12, right: 12 })
        .onClick(() => {
          setTimeout(() => {
            this.pathStack?.pop(item)
          }, 100)
        })
      }
    })
  }
  .divider({ strokeWidth: 0.4, color: default_gray100 })
  .edgeEffect(EdgeEffect.None)
  .scrollBarWidth(0)
  .width("100%")
}

出现的列表中间隔没有了分割线。

HarmonyOS

Heiang

2025-01-09 15:54:47

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

参考示例如下：

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

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

2025-01-09 19:14:57

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS list的divider bug

订阅鸿蒙技术特刊，精选内容抢先看