怎么给鸿蒙开发中的Waterflow添加header能力？

Question

怎么给鸿蒙开发中的Waterflow添加header能力？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

你可以使用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 })

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。