# LazyVGridLayout
该组件用于实现支持懒加载的网格布局，其父组件仅限于[WaterFlow](ts-container-waterflow.md)或[FlowItem](ts-container-flowitem.md)，并支持使用自定义组件、[NodeContainer](ts-basic-components-nodecontainer.md)组件封装后，在WaterFlow或FlowItem组件下应用。
该组件仅在WaterFlow组件的单列模式或分段布局中的单列分段，并且布局方向为FlexDirection.Column的情况下支持懒加载。在WaterFlow的多列模式或布局方向为FlexDirection.Row或FlexDirection.RowReverse的情况下使用该组件，则不支持懒加载。此外，在布局方向为FlexDirection.ColumnReverse的WaterFlow组件下使用该组件会导致显示异常。当懒加载功能生效时，该组件仅加载WaterFlow显示区域内的子组件，并在帧间空闲时隙预加载显示区域上方和下方各半屏的内容。
> **说明：**
>
> - 该组件从API version 19开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - LazyVGridLayout组件高度默认自适应内容，不建议设置高度、高度约束或宽高比，设置后会导致显示异常。
## 接口
LazyVGridLayout()
创建垂直方向懒加载网格布局容器。
**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
## 属性
除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性：
### columnsTemplate
columnsTemplate(value: string)
设置当前网格布局列的数量、固定列宽或最小列宽值，不设置时默认1列。
例如，'1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
columnsTemplate('repeat(auto-fit, track-size)')是设置最小列宽值为track-size，自动计算列数和实际列宽。
columnsTemplate('repeat(auto-fill, track-size)')是设置固定列宽值为track-size，自动计算列数。
columnsTemplate('repeat(auto-stretch, track-size)')是设置固定列宽值为track-size，使用columnsGap为最小列间距，自动计算列数和实际列间距。
其中repeat、auto-fit、auto-fill、auto-stretch为关键字。track-size为列宽，支持的单位包括px、vp、%或有效数字，默认单位为vp，track-size至少包括一个有效列宽。
auto-stretch模式只支持track-size为一个有效列宽值，并且track-size只支持px、vp和有效数字，不支持%。
设置为'0fr'时，该列的列宽为0，不显示子组件。设置为其他非法值时，子组件显示为固定1列。
**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | ---------------------------------- |
| value | string | 是 | 当前网格布局列的数量或最小列宽值。 |
### columnsGap
columnsGap(value: LengthMetrics): T
设置列与列的间距。设置为小于0的值时，按默认值显示。
**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ---------------------------- | ---- | ---------------------------- |
| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 列与列的间距。
默认值：0vp |
**返回值：**
| 类型 | 说明 |
| --- | -------------- |
| T | 返回当前LazyVGridLayout组件。 |
### rowsGap
rowsGap(value: LengthMetrics): T
设置行与行的间距。设置为小于0的值时，按默认值显示。
**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
**系统能力：** SystemCapability.ArkUI.ArkUI.Full
**参数：**
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ---------------------------- | ---- | ---------------------------- |
| value | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 行与行的间距。
默认值：0vp |
**返回值：**
| 类型 | 说明 |
| --- | -------------- |
| T | 返回当前LazyVGridLayout组件。 |
## 事件
仅支持[通用事件](ts-component-general-events.md)。
## 示例
该示例通过WaterFlow和LazyVGridLayout实现懒加载网格布局。
MyDataSource实现了LazyForEach数据源接口[IDataSource](ts-rendering-control-lazyforeach.md#idatasource)，用于通过LazyForEach给LazyVGridLayout提供子组件。
```ts
import { LengthMetrics } from '@kit.ArkUI'
import { MyDataSource } from './MyDataSource'
@Entry
@Component
struct LazyVGridLayoutSample1 {
private arr:MyDataSource = new MyDataSource();
build() {
Column() {
WaterFlow() {
LazyVGridLayout() {
LazyForEach(this.arr, (item:number)=>{
Text("item" + item.toString())
.height(64)
.width("100%")
.borderRadius(5)
.backgroundColor(Color.White)
.textAlign(TextAlign.Center)
})
}
.columnsTemplate("1fr 1fr")
.rowsGap(LengthMetrics.vp(10))
.columnsGap(LengthMetrics.vp(10))
}.padding(10)
}
.width('100%').height('100%')
.backgroundColor("#DCDCDC")
}
aboutToAppear(): void {
for (let i = 0; i < 100; i++) {
this.arr.pushData(i);
}
}
}
```
```ts
// MyDataSource.ets
export class BasicDataSource 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 MyDataSource extends BasicDataSource {
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();
}
}
```
