HarmonyOS6 ArkTS WaterFlow

文章目录WaterFlow 组件概述核心 API 说明1. 组件构造2. 子组件3. 核心属性完整示例代码核心要点说明1. 瀑布流实现关键2. 数据与高度生成3. 布局规范总结WaterFlow 组件概述WaterFlow是 HarmonyOS ArkTS 提供的瀑布流滚动容器组件能够根据子项FlowItem的高度自动错落排列是实现商品列表、图片画廊、信息流等场景的核心组件。核心特点支持多列自动布局自动填充高度最短的列支持自定义列宽、间距、内边距搭配 FlowItem 实现高度自适应的瀑布流效果支持滚动控制、滚动条自定义、事件监听性能高效适合大数据量列表展示核心 API 说明1. 组件构造WaterFlow(options?:{scroller?:Scroller})scroller绑定滚动控制器用于控制滚动行为。2. 子组件必须使用FlowItem作为瀑布流的最小单元每个 FlowItem 可独立设置高度。3. 核心属性属性名说明示例值columnsTemplate列布局配置1fr 1fr表示双列等宽‘1fr 1fr’columnsGap列之间的间距12rowsGap行之间的间距12padding内边距12scrollBar滚动条显示策略BarState.AutoscrollBarColor滚动条颜色‘#3878F3’scrollBarWidth滚动条宽度4flexGrow占满父容器剩余高度1完整示例// WaterFlowStandardExample.ets Entry Component struct WaterFlowStandardExample { private scroller: Scroller new Scroller(); // 固定数据数组彻底消除泛型推断警告 private dataList: number[] [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39 ]; // 为每个卡片预定义随机高度核心保证瀑布流错落有致且布局工整 private itemHeights: number[] []; // 卡片背景色数组 private bgColors: string[] [ #3878F3, #F5A623, #86909C, #68B4FF, #DDEBFF, #F5F7FA, #FFEFC9, #DBD0C0 ]; aboutToAppear() { // 初始化每个卡片的高度120vp ~ 280vp 随机保证错落有致 for (let i 0; i this.dataList.length; i) { this.itemHeights.push(120 Math.floor(Math.random() * 160)); } } build() { Column() { // 标题栏 Text(HarmonyOS6 WaterFlow 标准双列瀑布流) .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor(#2A2A2A) .width(100%) .height(56) .textAlign(TextAlign.Center) .backgroundColor(#FFFFFF) .lineHeight(56); // 核心WaterFlow 瀑布流组件 WaterFlow({ scroller: this.scroller }) { ForEach(this.dataList, (index: number) { FlowItem() { // 卡片内容容器 Column() { // 卡片标题 Text(卡片 ${index 1}) .fontSize(18) .fontWeight(FontWeight.Medium) .fontColor(#FFFFFF) .margin({ bottom: 8 }); // 卡片高度标识 Text(${this.itemHeights[index]}vp) .fontSize(14) .fontColor(#FFFFFFCC) .alignSelf(ItemAlign.End); } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } .width(100%) .height(this.itemHeights[index]) // 关键每个卡片高度独立 .backgroundColor(this.bgColors[index % this.bgColors.length]) .borderRadius(16) .shadow({ radius: 4, color: #00000010, offsetX: 0, offsetY: 2 }); }, (index: number) index.toString() // 唯一key保证渲染稳定 ); } // 瀑布流核心布局配置 .columnsTemplate(1fr 1fr) // 双列等宽布局标准瀑布流 .columnsGap(12) // 列间距 .rowsGap(12) // 行间距 .padding(12) // 整体内边距 .backgroundColor(#F5F7FA) .width(100%) .flexGrow(1) // 占满剩余高度避免布局挤压 .scrollBar(BarState.Auto) // 滚动条自动显示 .scrollBarColor(#3878F3) .scrollBarWidth(4); } .width(100%) .height(100%) .backgroundColor(#F5F7FA); } }运行效果如图代码核心要点说明1. 瀑布流实现关键使用columnsTemplate(1fr 1fr)定义双列等宽布局每个FlowItem设置独立高度形成错落效果WaterFlow 自动将子项填充到高度最短的列中2. 数据与高度生成使用固定数组dataList避免泛型推断报错在aboutToAppear()中预生成随机高度保证瀑布流效果高度范围120vp ~ 280vp视觉更自然3. 布局规范FlowItem 必须设置width(100%)充满列宽WaterFlow 使用flexGrow(1)占满屏幕剩余高度配置columnsGap和rowsGap让布局更美观总结WaterFlow 是 HarmonyOS6 中实现瀑布流布局的官方组件使用简单、性能优异通过配置列数、间距、子项高度即可快速实现标准瀑布流效果。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力