资讯详情

鸿蒙第8篇——WaterFlow组件

📅 2026/10/22 2:20:09 | 华诺云谱 👁 阅读
鸿蒙第8篇——WaterFlow组件
WaterFlow组件又称瀑布流组件, 在APP中显示列表数据,除了使用List组件和Grid组件外, 也经常使用WaterFlow组件。先看效果图1.创建WaterFlow组件使用下面的接口创建WaterFlow组件WaterFlow(options?: WaterFlowOptions)WaterFlow组件的子组件是FlowItem, 用于展示瀑布流的Item.2. WaterFlow组件的常用属性3.WaterFlow的组件的常用事件4.示例代码Index_WaterFlow.ets 如下:import{WaterFlowDataSource}from'../module/WaterFlowDataSource'@Entry@Componentstruct Index_WaterFlow{privatewaterFlowDataSource:WaterFlowDataSource=newWaterFlowDataSource();@Statesections:WaterFlowSections=newWaterFlowSections()oneColumSection:SectionOptions={itemsCount:1,// 该分组中Item的个数crossCount:1,// 列数为 1margin:{bottom:10},onGetItemMainSizeByIndex:()={return160}}twoColumSection:SectionOptions={itemsCount:14,// 该分组中Item的个数crossCount:2,// 列数为2onGetItemMainSizeByIndex:()={return160}}aboutToAppear():void{// 准备数据源this.waterFlowDataSource.setDataArray(WaterFlowDataModule.WATER_FLOW_DATA)this.sections.push(this.oneColumSection)this.sections.push(this.twoColumSection)}build(){// 瀑布流WaterFlow({sections
📝

华诺云谱内容团队

资深建站顾问 · 行业研究员

10年+企业数字化服务经验,专注智能建站、SEO优化与品牌营销,持续输出建站技巧、行业洞察与营销干货,已帮助5000+企业实现数字化增长。

你可能需要的服务

订阅华诺云谱资讯周报

每周一封,精选建站技巧、SEO与营销干货,直达邮箱。已有 8,000+ 企业主订阅,助你少走弯路。

↑