鸿蒙：WaterFlow瀑布流组件的使用

1、前言

在电商app开发中，我们经常会用到瀑布流组件，实现商品的个性化展示，鸿蒙瀑布流组件是WaterFlow。

2、参考文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-waterflowhttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-waterflow

3、核心思路

1. 在项目的rawfile目录下放入1.jpg 2.jpg 3.jpg 4.jpg

2. 在组件构建之前往数组里面添加1~4的随机数

3. 使用waterFlow组件结合ForEach渲染列表

4、核心代码

    WaterFlow() {ForEach(this.arrayNum, (item: number) => {FlowItem() {Image($rawfile(`${item}.jpg`))}.backgroundColor(Color.Gray).padding(5)})}.columnsTemplate('1fr 1fr')

5、运行效果

6、完整代码

// 生成包含0-3所有数字、且无重复的随机数组（长度固定为4）
function generateUnique0To3Arr(): number[] {const baseArr = [1, 2, 3, 4]; // 基础数组（包含0-3所有元素）// 洗牌算法：用“临时变量”替换解构赋值，实现元素交换for (let i = baseArr.length - 1; i > 0; i--) {// 1. 生成0~i之间的随机索引j（确保不重复交换已打乱的元素）const j = Math.floor(Math.random() * (i + 1));// 2. 用临时变量temp存储baseArr[i]，避免交换时值被覆盖const temp = baseArr[i];baseArr[i] = baseArr[j]; // 把j位置的值赋给ibaseArr[j] = temp; // 把临时存储的i值赋给j，完成交换}return baseArr; // 返回打乱后的数组（包含0-3，无重复）
}@Entry
@Component
struct Index {@State arrayNum: Array<number> = []aboutToAppear(): void {this.arrayNum = generateUnique0To3Arr()this.arrayNum.push(...generateUnique0To3Arr())this.arrayNum.push(...generateUnique0To3Arr())this.arrayNum.push(...generateUnique0To3Arr())}build() {Column() {WaterFlow() {ForEach(this.arrayNum, (item: number) => {FlowItem() {Image($rawfile(`${item}.jpg`))}.backgroundColor(Color.Gray).padding(5)})}.columnsTemplate('1fr 1fr')}}
}

觉得有帮助可以点赞或收藏