HarmonyOS鸿蒙Next中瀑布流（WaterFlow）如何设置某一行横跨两列？

HarmonyOS鸿蒙Next中瀑布流（WaterFlow）如何设置某一行横跨两列？

求助各位，API 9 下 WaterFlow 是否可以通过 auto-fill 或其他方式实现以下效果？

图片


更多关于HarmonyOS鸿蒙Next中瀑布流（WaterFlow）如何设置某一行横跨两列？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

外层Scroll,然后栅格布局，头部四个均分，第五个占全屏。最后一个子栅格使用WaterFlow。整体可滑动。API 11。

更多关于HarmonyOS鸿蒙Next中瀑布流（WaterFlow）如何设置某一行横跨两列？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@Entry @Component struct Page53 { @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] private scrollerForScroll: Scroller = new Scroller() private scrollerForList: Scroller = new Scroller()

build() { Flex() { Scroll(this.scrollerForScroll) { Column() { Text(“Scroll Area”) .width(“100%”) .height(“40%”) .backgroundColor(0X330000FF) .fontSize(16) .textAlign(TextAlign.Center) .onClick(() => { this.scrollerForList.scrollToIndex(5) })

      WaterFlow({ scroller: this.scrollerForList }) {
        ForEach(this.arr, (item) => {
          FlowItem() {
            Text("ListItem" + item)
              .width("100%")
              .height("100%")
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.White)
          }.width("100%").height(100)
        }, item => item)
      }
      .enabled(false)
      .columnsGap(40)
      .rowsGap(10)
      .columnsTemplate("1fr 1fr")
      .width("100%")
      .height("100%")
      .onReachStart(() => {
        this.listPosition = 0
      })
      .onReachEnd(() => {
        this.listPosition = 2
      })

      Text("Scroll Area")
        .width("100%")
        .height("40%")
        .backgroundColor(0X330000FF)
        .fontSize(16)
        .textAlign(TextAlign.Center)
    }
  }
  .width("100%").height("100%")
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)

} }

支持嵌套，.enabled(false)这个把WaterFlow的滑动取消，要不然跟Scroll冲突了。

跑了下，这种方式有用，感谢大佬！

好像也不太对，滑动取消后应该如何确定 WaterFlow 的组件高度呢？比如说 this.arr 有 10000 个 element 的时候，WaterFlow 的高度依然会固定为 ‘100%’，且不支持滑动，那么未显示出来的元素不就是永远显示不出来了吗？

我查询demo，我发现其实你这种情况很好做到，我发现，每个item都可以单独设置宽度跟高度。

这个就是根据数组里面的计算出你想实现的宽高。

我看到这个 Demo 了，我感觉这个仅限于列数固定的瀑布流布局，设置 columnsTemplate 属性为 ‘1fr 1fr’ 后列数固定是两列，貌似无法实现我的这种有的一行是一列，有的是四列，有的是两列的情况？

列1 列2 列3 列4
内容1 内容2 内容3 内容4
内容5 内容6 内容7 内容8

WaterFlow是最下面的控件。

是的，一开始是把 WaterFlow 做成最下面的控件，整个页面用一个 Scroll 来支持上面的组件滚动，但是 API 9 下不支持滚动组件的嵌套，所以才想着把整个界面都做成 WaterFlow，又看到 WaterFlow 支持 auto-fill，隐约觉得可行，所以来问问论坛上的大佬有没有什么好的解决方案。

这个不能通过WaterFlow实现，可以通过Gird布局里面rowsTemplate这个属性来设置多行数据。

Grid 好像要求我必须提前预设哪一项会横跨多行/多列？6-11 是一个瀑布流列表，Grid 可以满足需求吗？

我重新看了一下，WaterFlow支持auto-fill ，可以做到。Grid 只能写死rowsTemplate，

我是看到支持 auto-fill，但是不知道这个 auto-fill 要怎么写 track-size，官方文档和 Demo 里均未对这一关键字进行更进一步的详细说明，可否有其他文档推荐？

在HarmonyOS鸿蒙Next中，可以通过自定义WaterFlowItemController来实现瀑布流中某一行横跨两列的效果。具体步骤如下：

  1. 创建自定义ItemController：继承WaterFlowItemController，重写onMeasure和onLayout方法，调整Item的宽度和布局。
  2. 设置跨列属性：在onMeasure中，将Item的宽度设置为两列的宽度，并调整高度以适应内容。
  3. 应用自定义Controller：在WaterFlow中使用自定义的ItemController，确保跨列效果生效。

通过这种方式，可以灵活控制瀑布流中Item的布局，实现跨列效果。

回到顶部