HarmonyOS6 ArkTS FlowItem

文章目录概述核心特性核心 API 说明1. 组件构造器2. 核心属性无专属属性继承通用属性3. 子组件规则示例代码代码核心要点解析1. FlowItem 与 WaterFlow 的绑定关系2. FlowItem 关键配置总结概述FlowItem是 HarmonyOS ArkTS 中瀑布流WaterFlow组件的专用子组件用于承载瀑布流中的单个内容项是实现错落有致瀑布流布局的核心单元。核心特性专属依赖仅支持作为WaterFlow组件的子组件无法单独使用或嵌套在其他容器中单子组件支持FlowItem 内部仅允许包含一个直接子组件可嵌套多层布局尺寸自定义需手动设置宽高宽度通常为100%适配列宽不同 FlowItem 的高度差异是形成瀑布流效果的关键性能优化滑动场景中建议结合Reusable装饰器实现组件复用减少节点创建/销毁开销。核心 API 说明1. 组件构造器FlowItem()无参数构造直接创建 FlowItem 实例元服务支持从 API version 11 开始支持在元服务中使用系统能力SystemCapability.ArkUI.ArkUI.Full。2. 核心属性无专属属性继承通用属性FlowItem 本身无专属属性支持所有组件通用属性常用配置如下属性作用示例配置width设置 FlowItem 宽度通常为100%适配 WaterFlow 列宽.width(100%)height设置 FlowItem 高度不同高度形成瀑布流.height(this.itemHeights[index])backgroundColor背景色.backgroundColor(#3878F3)borderRadius圆角.borderRadius(16)shadow阴影效果.shadow({ radius: 3, color: #00000010 })margin/padding外边距/内边距.margin({ top: 6 })3. 子组件规则仅支持单个直接子组件可嵌套 Column、Row、Stack 等布局组件再在布局内添加多个子元素子组件尺寸建议设置为width(100%)和height(100%)完全填充 FlowItem 容器。示例代码// FlowItemCompleteExample.ets Entry Component struct FlowItemCompleteExample { private scroller: Scroller new Scroller(); // 固定数据20条示例数据 private dataList: number[] [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ]; // 随机高度数组FlowItem 核心不同高度实现瀑布流错落效果 private itemHeights: number[] []; // 背景色数组区分不同 FlowItem private colors: string[] [ #3878F3, #F5A623, #86909C, #68B4FF, #DDEBFF, #FFEFC9, #DBD0C0, #F5F7FA ]; // 组件即将出现时初始化随机高度100vp ~ 260vp aboutToAppear() { for (let i 0; i this.dataList.length; i) { this.itemHeights.push(100 Math.floor(Math.random() * 160)); } } build() { Column() { // 标题栏 Text(FlowItem 官方标准示例) .fontSize(22) .fontWeight(FontWeight.Bold) .width(100%) .textAlign(TextAlign.Center) .padding(16) .backgroundColor(#fff); // 核心WaterFlow 容器FlowItem 必须嵌套其中 WaterFlow({ scroller: this.scroller }) { ForEach(this.dataList, (index: number) { // FlowItem 核心组件 FlowItem() { // FlowItem 内部仅支持单个直接子组件此处为 Column 布局 Column() { Text(FlowItem ${index 1}) .fontSize(16) .fontColor(#fff) .fontWeight(FontWeight.Medium); Text(高 ${this.itemHeights[index]}vp) .fontSize(12) .fontColor(#ffffff90) .margin({ top: 6 }); } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .backgroundColor(this.colors[index % this.colors.length]) .borderRadius(16) .shadow({ radius: 3, color: #00000010 }); } // 必须设置宽高官方规范宽度100%适配列宽高度随机 .width(100%) .height(this.itemHeights[index]); }, (index: number) index.toString()); // 唯一标识确保渲染稳定 } // WaterFlow 布局配置配合 FlowItem 实现双列瀑布流 .columnsTemplate(1fr 1fr) // 双列等宽布局 .columnsGap(12) // 列间距 .rowsGap(12) // 行间距 .padding(12) // 内边距 .width(100%) .flexGrow(1) // 占满剩余高度避免布局挤压 .backgroundColor(#f5f7fa); } .width(100%) .height(100%) .backgroundColor(#f5f7fa); } }运行效果如图代码核心要点解析1. FlowItem 与 WaterFlow 的绑定关系强制依赖FlowItem 必须嵌套在 WaterFlow 内部否则无法正常渲染官方明确规定布局联动WaterFlow 通过columnsTemplate定义列数FlowItem 宽度设置为100%自动适配列宽不同 FlowItem 的高度差异触发瀑布流自动填充逻辑优先填充高度最短的列。2. FlowItem 关键配置宽度设置必须为width(100%)确保完全填充所在列的宽度高度设置需为每个 FlowItem 设置独立高度示例中通过随机数生成这是瀑布流“错落有致”的核心子组件限制内部直接子组件仅能有一个示例中用 Column 包裹两个 Text 组件符合规范。总结FlowItem 是 HarmonyOS6 实现瀑布流布局的核心基础组件其核心价值在于与 WaterFlow 联动通过灵活的尺寸配置实现错落有致的内容展示。使用时需严格遵循官方规范专属父容器、单直接子组件、显式宽高结合业务场景自定义高度和内部内容即可快速实现高性能、美观的瀑布流效果。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力