HarmonyOS6 ArkTS LazyVGridLayout

文章目录概述核心特性核心 API 说明1. 组件作用2. 必须配合的组件3. 核心属性完整代码代码结构与解析1. 标准结构2. 关键配置说明✅ columnsTemplate列模板✅ columnsGap列间距✅ rowsGap行间距✅ LazyForEach IDataSource总结概述LazyVGridLayout是 HarmonyOS ArkTS 提供的懒加载垂直网格布局组件必须作为WaterFlow的直接子组件使用用于实现分组式、多列、高度自适应、懒加载的网格布局。核心特性懒加载机制仅渲染屏幕可见区域的子项大幅提升大数据量列表性能。垂直流式布局从上到下、从左到右自动排列子项。多列配置通过columnsTemplate自由定义列宽与列数。分组能力一个 WaterFlow 内可嵌套多个 LazyVGridLayout实现不同列数、不同间距的分组布局。数据驱动必须配合LazyForEachIDataSource数据源使用。核心 API 说明1. 组件作用LazyVGridLayout 是WaterFlow 专用子布局容器用于在瀑布流中实现网格布局提供高性能懒加载能力。2. 必须配合的组件父容器WaterFlow数据渲染LazyForEach数据源实现IDataSource接口3. 核心属性属性名作用示例columnsTemplate定义列宽与列数1fr单列 /1fr 1fr双列columnsGap列之间的间距LengthMetrics.vp(10)rowsGap行之间的间距LengthMetrics.vp(10)width/height布局宽高通常100%完整代码import { LengthMetrics } from kit.ArkUI Entry Component struct LazyVGridLayoutSample1 { private arr1:MyDataSourcenumber new MyDataSourcenumber(); private arr2:MyDataSourcenumber new MyDataSourcenumber(); build() { Column() { WaterFlow() { LazyVGridLayout() { LazyForEach(this.arr1, (item:number){ Text(item item.toString()) .height(64) .width(100%) .borderRadius(5) .backgroundColor(Color.White) .textAlign(TextAlign.Center) }) } .columnsTemplate(1fr) .rowsGap(LengthMetrics.vp(10)) LazyVGridLayout() { LazyForEach(this.arr2, (item:number){ Text(item item.toString()) .height(128) .width(100%) .borderRadius(5) .backgroundColor(Color.White) .textAlign(TextAlign.Center) }) } .columnsTemplate(1fr 1fr) .rowsGap(LengthMetrics.vp(10)) .columnsGap(LengthMetrics.vp(10)) }.padding(10) .rowsGap(10) } .width(100%).height(100%) .backgroundColor(#DCDCDC) } aboutToAppear(): void { for (let i 0; i 6; i) { this.arr1.pushData(i); } for (let i 0; i 100; i) { this.arr2.pushData(i); } } } // MyDataSource.ets export class BasicDataSourceT implements IDataSource { private listeners: DataChangeListener[] []; protected dataArray: T[] []; public totalCount(): number { return this.dataArray.length; } public getData(index: number): T { return this.dataArray[index]; } registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) 0) { console.info(add listener); this.listeners.push(listener); } } unregisterDataChangeListener(listener: DataChangeListener): void { const pos this.listeners.indexOf(listener); if (pos 0) { console.info(remove listener); this.listeners.splice(pos, 1); } } notifyDataReload(): void { this.listeners.forEach(listener { listener.onDataReloaded(); }) } notifyDataAdd(index: number): void { this.listeners.forEach(listener { listener.onDataAdd(index); }) } notifyDataChange(index: number): void { this.listeners.forEach(listener { listener.onDataChange(index); }) } notifyDataDelete(index: number): void { this.listeners.forEach(listener { listener.onDataDelete(index); }) } notifyDataMove(from: number, to: number): void { this.listeners.forEach(listener { listener.onDataMove(from, to); }) } notifyDatasetChange(operations: DataOperation[]): void { this.listeners.forEach(listener { listener.onDatasetChange(operations); }) } } export class MyDataSourceT extends BasicDataSourceT { public shiftData(): void { this.dataArray.shift(); this.notifyDataDelete(0); } public unshiftData(data: T): void { this.dataArray.unshift(data); this.notifyDataAdd(0); } public pushData(data: T): void { this.dataArray.push(data); this.notifyDataAdd(this.dataArray.length - 1); } public popData(): void { this.dataArray.pop(); this.notifyDataDelete(this.dataArray.length); } public clearData(): void { this.dataArray []; this.notifyDataReload(); } }运行效果如图代码结构与解析1. 标准结构WaterFlow() { // 第1组单列布局 LazyVGridLayout() { LazyForEach(数据源1, (...) { 子项 }) } .columnsTemplate(1fr) // 第2组双列布局 LazyVGridLayout() { LazyForEach(数据源2, (...) { 子项 }) } .columnsTemplate(1fr 1fr) }2. 关键配置说明✅ columnsTemplate列模板1fr→单列1fr 1fr→双列等宽1fr 1fr 1fr→三列等宽✅ columnsGap列间距必须使用LengthMetrics.vp(数值)格式符合 HarmonyOS6 类型规范。✅ rowsGap行间距控制每一行之间的间距。✅ LazyForEach IDataSourceLazyVGridLayout必须使用懒加载渲染你的代码中MyDataSource是标准实现包含pushData/popData增删数据notifyDataAdd/notifyDataDelete刷新列表总结LazyVGridLayout 是 HarmonyOS6 中实现高性能、分组式、多列网格的核心组件依托懒加载机制可轻松承载1000 数据项无卡顿。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力