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
5天前
浏览
收藏 0
回答 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
}
分享
微博
QQ
微信
回复
5天前
相关问题
HarmonyOS Listdivider使用
679浏览 • 0回复 待解决
List组件divider颜色显示透List组件颜色
414浏览 • 0回复 待解决
HarmonyOS getInspectorByKeybug
668浏览 • 1回复 待解决
HarmonyOS Divider组件,如何能显示虚线
108浏览 • 1回复 待解决
Divider组件是否存在虚线属性
938浏览 • 1回复 待解决
Divider组件如何设置分割线宽度
3020浏览 • 1回复 待解决
<state-container>貌似有BUG怎么处理?
5161浏览 • 1回复 待解决
HarmonyOS List嵌套list布局
125浏览 • 1回复 待解决
HarmonyOS List嵌套ListList嵌套Grid问题
190浏览 • 1回复 待解决
ArkTS UIList和集合List冲突问题
694浏览 • 1回复 待解决
HarmonyOS Listspace问题
273浏览 • 1回复 待解决
HarmonyOS 使用List警告
393浏览 • 1回复 待解决