【HarmonyOS NEXT】瀑布流数据少时，底部会出现空白，如何解决

最新推荐文章于 2024-10-02 09:54:20 发布

Mayism123

最新推荐文章于 2024-10-02 09:54:20 发布

阅读量372

点赞数 9

文章标签： harmonyos

本文链接：https://blog.csdn.net/Mayism123/article/details/138973808

版权

【关键字】

瀑布流 / WaterFlow / 底部空白

【问题描述】

如果瀑布流数据少时，瀑布流会下方会多出空余部分，导致底部会出现空白；如果数据多时就不会有此问题。目前数据只有四条，这个问题就可以复现出来。这个问题是不是组件的缺陷。实现方式是根据https://developer.harmonyos.com/cn/docs/documentation/doc-references-V4/ts-container-waterflow-0000001579866570-V4#ZH-CN_TOPIC_0000001666707804__%E7%A4%BA%E4%BE%8B1来实现的。实现应该没有问题，可以尝试小数据量时来复现此问题。

【解决方案】

WaterFlow设计就是这样，当数据过少时，WaterFlow下方就会有一定的空白。

可以在最外层使用Scroll容器，不要给WaterFlow设置高度（根据内容自适应），并这是WaterFlow的滑动模式来解决。

参照代码如下：

Scroll() {
Column() {
WaterFlow() {
//Item加载
}
.columnsTemplate("1fr 1fr")
.columnsGap(10)
.rowsGap(5)
.width('100%')
.borderWidth(10)
.nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
}
}.width('100%').align(Alignment.TopStart)