• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# LazyVGridLayout
2
3<!--Kit: ArkUI-->
4<!--Subsystem: ArkUI-->
5<!--Owner: @yylong-->
6<!--Designer: @yylong-->
7<!--Tester: @liuzhenshuo-->
8<!--Adviser: @HelloCrease-->
9
10该组件用于实现支持懒加载的网格布局，其父组件仅限于[WaterFlow](ts-container-waterflow.md)或[FlowItem](ts-container-flowitem.md)，并支持使用自定义组件、[NodeContainer](ts-basic-components-nodecontainer.md)组件封装后，在WaterFlow或FlowItem组件下应用。
11
12该组件仅在WaterFlow组件的单列模式或分段布局中的单列分段，并且布局方向为FlexDirection.Column的情况下支持懒加载。在WaterFlow的多列模式或布局方向为FlexDirection.Row或FlexDirection.RowReverse的情况下使用该组件，则不支持懒加载。此外，在布局方向为FlexDirection.ColumnReverse的WaterFlow组件下使用该组件会导致显示异常。当懒加载功能生效时，该组件仅加载WaterFlow显示区域内的子组件，并在帧间空闲时隙预加载显示区域上方和下方各半屏的内容。
13
14> **说明：**
15>
16> - 该组件从API version 19开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
17> - LazyVGridLayout组件高度默认自适应内容，不建议设置高度、高度约束或宽高比，设置后会导致显示异常。
18
19## 接口
20
21LazyVGridLayout()
22
23创建垂直方向懒加载网格布局容器。
24
25**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
26
27**系统能力：** SystemCapability.ArkUI.ArkUI.Full
28
29## 属性
30
31除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性：
32
33### columnsTemplate
34
35columnsTemplate(value: string)
36
37设置当前网格布局列的数量、固定列宽或最小列宽值，不设置时默认1列。
38
39例如，'1fr&nbsp;1fr&nbsp;2fr'&nbsp;是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
40
41columnsTemplate('repeat(auto-fit, track-size)')是设置最小列宽值为track-size，自动计算列数和实际列宽。
42
43columnsTemplate('repeat(auto-fill, track-size)')是设置固定列宽值为track-size，自动计算列数。
44
45columnsTemplate('repeat(auto-stretch, track-size)')是设置固定列宽值为track-size，使用columnsGap为最小列间距，自动计算列数和实际列间距。
46
47其中repeat、auto-fit、auto-fill、auto-stretch为关键字。track-size为列宽，支持的单位包括px、vp、%或有效数字，默认单位为vp，track-size至少包括一个有效列宽。<br/>
48auto-stretch模式只支持track-size为一个有效列宽值，并且track-size只支持px、vp和有效数字，不支持%。
49
50设置为'0fr'时，该列的列宽为0，不显示子组件。设置为其他非法值时，子组件显示为固定1列。
51
52**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
53
54**系统能力：** SystemCapability.ArkUI.ArkUI.Full
55
56**参数：**
57
58| 参数名 | 类型   | 必填 | 说明                               |
59| ------ | ------ | ---- | ---------------------------------- |
60| value  | string | 是   | 当前网格布局列的数量或最小列宽值。 |
61
62### columnsGap
63
64columnsGap(value: LengthMetrics): T
65
66设置列与列的间距。设置为小于0的值时，按默认值显示。
67
68**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
69
70**系统能力：** SystemCapability.ArkUI.ArkUI.Full
71
72**参数：**
73
74| 参数名 | 类型                         | 必填 | 说明                         |
75| ------ | ---------------------------- | ---- | ---------------------------- |
76| value  |  [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是   | 列与列的间距。<br/>默认值：0vp |
77
78**返回值：**
79
80| 类型 | 说明           |
81| --- | -------------- |
82| T | 返回当前LazyVGridLayout组件。 |
83
84### rowsGap
85
86rowsGap(value: LengthMetrics): T
87
88设置行与行的间距。设置为小于0的值时，按默认值显示。
89
90**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。
91
92**系统能力：** SystemCapability.ArkUI.ArkUI.Full
93
94**参数：**
95
96| 参数名 | 类型                         | 必填 | 说明                         |
97| ------ | ---------------------------- | ---- | ---------------------------- |
98| value  | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 是   | 行与行的间距。<br/>默认值：0vp |
99
100**返回值：**
101
102| 类型 | 说明           |
103| --- | -------------- |
104| T | 返回当前LazyVGridLayout组件。 |
105
106## 事件
107
108仅支持[通用事件](ts-component-general-events.md)。
109
110## 示例
111
112该示例通过WaterFlow和LazyVGridLayout实现懒加载网格布局。
113
114MyDataSource实现了LazyForEach数据源接口[IDataSource](ts-rendering-control-lazyforeach.md#idatasource)，用于通过LazyForEach给LazyVGridLayout提供子组件。
115
116<!--code_no_check-->
117```ts
118import { LengthMetrics } from '@kit.ArkUI'
119import { MyDataSource } from './MyDataSource'
120
121@Entry
122@Component
123struct LazyVGridLayoutSample1 {
124  private arr:MyDataSource<number> = new MyDataSource<number>();
125  build() {
126    Column() {
127      WaterFlow() {
128        LazyVGridLayout() {
129          LazyForEach(this.arr, (item:number)=>{
130            Text("item" + item.toString())
131              .height(64)
132              .width("100%")
133              .borderRadius(5)
134              .backgroundColor(Color.White)
135              .textAlign(TextAlign.Center)
136          })
137        }
138        .columnsTemplate("1fr 1fr")
139        .rowsGap(LengthMetrics.vp(10))
140        .columnsGap(LengthMetrics.vp(10))
141      }.padding(10)
142    }
143    .width('100%').height('100%')
144    .backgroundColor("#DCDCDC")
145  }
146
147  aboutToAppear(): void {
148    for (let i = 0; i < 100; i++) {
149      this.arr.pushData(i);
150    }
151  }
152}
153```
154
155<!--code_no_check-->
156```ts
157// MyDataSource.ets
158export class BasicDataSource<T> implements IDataSource {
159  private listeners: DataChangeListener[] = [];
160  protected dataArray: T[] = [];
161
162  public totalCount(): number {
163    return this.dataArray.length;
164  }
165
166  public getData(index: number): T {
167    return this.dataArray[index];
168  }
169
170  registerDataChangeListener(listener: DataChangeListener): void {
171    if (this.listeners.indexOf(listener) < 0) {
172      console.info('add listener');
173      this.listeners.push(listener);
174    }
175  }
176
177  unregisterDataChangeListener(listener: DataChangeListener): void {
178    const pos = this.listeners.indexOf(listener);
179    if (pos >= 0) {
180      console.info('remove listener');
181      this.listeners.splice(pos, 1);
182    }
183  }
184
185  notifyDataReload(): void {
186    this.listeners.forEach(listener => {
187      listener.onDataReloaded();
188    })
189  }
190
191  notifyDataAdd(index: number): void {
192    this.listeners.forEach(listener => {
193      listener.onDataAdd(index);
194    })
195  }
196
197  notifyDataChange(index: number): void {
198    this.listeners.forEach(listener => {
199      listener.onDataChange(index);
200    })
201  }
202
203  notifyDataDelete(index: number): void {
204    this.listeners.forEach(listener => {
205      listener.onDataDelete(index);
206    })
207  }
208
209  notifyDataMove(from: number, to: number): void {
210    this.listeners.forEach(listener => {
211      listener.onDataMove(from, to);
212    })
213  }
214
215  notifyDatasetChange(operations: DataOperation[]): void {
216    this.listeners.forEach(listener => {
217      listener.onDatasetChange(operations);
218    })
219  }
220}
221
222export class MyDataSource<T> extends BasicDataSource<T> {
223  public shiftData(): void {
224    this.dataArray.shift();
225    this.notifyDataDelete(0);
226  }
227  public unshiftData(data: T): void {
228    this.dataArray.unshift(data);
229    this.notifyDataAdd(0);
230  }
231  public pushData(data: T): void {
232    this.dataArray.push(data);
233    this.notifyDataAdd(this.dataArray.length - 1);
234  }
235  public popData(): void {
236    this.dataArray.pop();
237    this.notifyDataDelete(this.dataArray.length);
238  }
239  public clearData(): void {
240    this.dataArray = [];
241    this.notifyDataReload();
242  }
243}
244```
245
246![](figures/zh-cn_image_lazyvgridlayout1.png)
247