Waterflow怎么添加header能力?

HarmonyOS

躺平嗑产品懒猫

2024-07-19 10:06:32

浏览

回答 1

待解决

回答 1

按赞同

按时间

NingJ

可以使用list把Waterflow作为ListItem的内容

示例代码

build() {
  Column({ space: 2 }) {
    List({ space: 20， scroller: this.scroller }) {
      ListItemGroup({ header: this.hover() }) {
        ListItem() {
          WaterFlow() {
            LazyForEach(this.dataSource， (item: number) => {
              FlowItem() {
                Column() {
                  Text("N" + item).fontSize(12).height('16')
                  Image('res/waterFlowTest(' + item % 5 + ').jpg')
                    .objectFit(ImageFit.Fill)
                    .width('100%')
                    .layoutWeight(1)
                }
              }
              .onAppear(() => {
                // 即将触底时提前增加数据
                if (item + 20 == this.dataSource.totalCount()) {
                  for (let i = 0; i < 100; i++) {
                    this.dataSource.addLastItem()
                  }
                }
              })
              .width('100%')
              .height(this.itemHeightArray[item % 100])
              .backgroundColor(this.colors[item % 5])
            }， (item: string) => item)
          }
          .columnsTemplate("1fr 1fr")
          .columnsGap(10)
          .rowsGap(5)
          .backgroundColor(0xFAEEE0)
          .height('90%')
          .width('100%')
        }
      }
    }
    .sticky(StickyStyle.Header)
    .backgroundColor('#eeeeee')
    .divider({ strokeWidth: 1， color: 0x222222 })