Waterflow怎么添加header能力?

Waterflow怎么添加header能力?

HarmonyOS
2024-07-19 10:06:32
浏览
收藏 0
回答 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 })
分享
微博
QQ
微信
回复
2024-07-19 19:24:24
相关问题
基于原生的水印添加能力
501浏览 • 1回复 待解决
服务中心添加卡片怎么添加
6117浏览 • 1回复 待解决
buttom样式怎么添加
6262浏览 • 2回复 待解决
WaterFlow的使用范例有哪些?
622浏览 • 1回复 待解决
请问原子布局能力怎么理解?
10073浏览 • 1回复 已解决
Image 上怎么添加文字?
2765浏览 • 1回复 待解决
HarmonyOS List组件和WaterFlow组件增强
278浏览 • 1回复 待解决
HarmonyOS List嵌套waterflow滑动卡顿
92浏览 • 1回复 待解决
怎么在httpRequest中添加cookie
419浏览 • 1回复 待解决
Scroll与WaterFlow滑动嵌套
747浏览 • 1回复 待解决
listContainer怎么通过addComponent添加布局
7989浏览 • 1回复 待解决
ets怎么实现动态添加组件?
3204浏览 • 1回复 待解决
关于Grid容器和WaterFlow使用上的问题
701浏览 • 1回复 待解决
HamonyOS 设置webview的请求头header
200浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人