• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 栅格布局
2
3栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
4
51. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。
62. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
73. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
8
9推荐使用栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md)来实现栅格布局效果，
10相对于目前已废弃的[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)组件，GridRow和GridCol提供了更灵活、更全面的栅格系统实现方案。GridRow为栅格容器组件，只能与栅格子组件GridCol在栅格布局场景中使用。
11
12
13## 栅格容器GridRow
14
15
16栅格容器有columns、gutter、direction、breakpoints四个属性。
17- columns: 栅格布局的主要定位工具，设置栅格布局的总列数。
18- gutter: 设置元素之间的距离，决定内容间的紧密程度。
19- direction: 设置栅格子组件在栅格容器中的排列方向。
20- breakpoints：以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
21
22
23首先通过设置断点，得到一系列断点区间；然后，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，最后调整应用的布局。
24
25### 栅格系统断点
26
27栅格系统以设备的水平宽度（屏幕密度像素值，单位vp)作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。
28栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：
29
30| 断点名称  | 取值范围（vp）|
31| --------| ------ |
32| xs | [0, 320）   |
33| sm | [320, 520) |
34| md | [520, 840) |
35| lg | [840, +∞)  |
36
37在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，
38还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。
39
40| 断点名称 | 设备描述        |
41| ----- | ---------------------------------------- |
42| xs  | 最小宽度类型设备。    |
43| sm   | 小宽度类型设备。      |
44| md   | 中等宽度类型设备。    |
45| lg  | 大宽度类型设备。      |
46| xl   | 特大宽度类型设备。    |
47| xxl | 超大宽度类型设备。    |
48
49- 针对断点位置，开发者根据实际使用场景，通过一个单调递增数组设置。由于breakpoints最多支持六个断点，单调递增数组长度最大为5。
50
51  ```ts
52  breakpoints: {value: ["100vp", "200vp"]}
53  ```
54
55  表示启用xs、sm、md共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md。
56
57  ```ts
58  breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}
59  ```
60
61  表示启用xs、sm、md、lg、xl共5个断点，小于320vp为xs，320vp-520vp为sm，520vp-840vp为md，840vp-1080vp为lg，大于1080vp为xl。
62
63
64- 栅格系统通过监听窗口或容器的尺寸变化进行断点，通过reference设置断点切换参考物。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。
65
66下例中，使用栅格的默认列数12列，通过断点设置将应用宽度分成六个区间，在各区间中，每个栅格子元素占用的列数均不同。效果如图：
67  ```ts
68GridRow({
69  breakpoints: {
70    value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
71    reference: BreakpointsReference.WindowSize
72  }
73}) {
74     ForEach(this.bgColors, (color, index) => {
75       GridCol({
76         span: {
77           xs: 2,
78           sm: 3,
79           md: 4,
80           lg: 6,
81           xl: 8,
82           xxl: 12
83         }
84       }) {
85         Row() {
86           Text(`${index}`)
87         }.width("100%").height("50vp")
88       }.backgroundColor(color)
89     })
90}
91  ```
92
93![](figures/breakpoints.gif)
94
95
96
97### 栅格布局的总列数
98
99GridRow中通过columns设置栅格布局的总列数。
100
101- columns默认值为12，当未设置columns时，在任何断点下，栅格布局被分成12列。
102   ```ts
103  GridRow() {
104    ForEach(this.bgColors, (item, index) => {
105      GridCol() {
106        Row() {
107          Text(`${index + 1}`)
108        }.width("100%").height("50")
109      }.backgroundColor(item)
110    })
111  }
112  ```
113
114  ![](figures/columns1.png)
115
116- 当columns类型为number时，栅格布局在任何尺寸设备下都被分为columns列。下面分别设置栅格布局列数为4和8，子元素默认占一列，效果如下：
117
118  ```ts
119  Row() {
120    GridRow({ columns: 4 }) {
121      ForEach(this.bgColors, (item, index) => {
122        GridCol() {
123          Row() {
124            Text(`${index + 1}`)
125          }.width("100%").height("50")
126        }.backgroundColor(item)
127      })
128    }
129    .width("100%").height("100%")
130    .onBreakpointChange((breakpoint) => {
131      this.currentBp = breakpoint
132    })
133  }
134  .height(160)
135  .border({ color: Color.Blue, width: 2 })
136  .width('90%')
137
138  Row() {
139    GridRow({ columns: 8 }) {
140      ForEach(this.bgColors, (item, index) => {
141        GridCol() {
142          Row() {
143            Text(`${index + 1}`)
144          }.width("100%").height("50")
145        }.backgroundColor(item)
146      })
147    }
148    .width("100%").height("100%")
149    .onBreakpointChange((breakpoint) => {
150      this.currentBp = breakpoint
151    })
152  }
153  .height(160)
154  .border({ color: Color.Blue, width: 2 })
155  .width('90%')
156  ```
157
158  ![](figures/columns2.png)
159
160
161- 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。
162
163  ```ts
164  GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) {
165    ForEach(this.bgColors, (item, index) => {
166      GridCol() {
167        Row() {
168          Text(`${index + 1}`)
169        }.width("100%").height("50")
170      }.backgroundColor(item)
171    })
172  }
173  ```
174  ![](figures/columns3.gif)
175
176  如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:8, md:10，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:10, xl:10, xxl:10。
177
178### 栅格子组件间距
179
180GridRow中通过gutter设置子元素在水平和垂直方向的间距。
181
182- 当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。
183
184  ```ts
185   GridRow({ gutter: 10 }){}
186  ```
187
188  ![](figures/gutter1.png)
189
190
191
192- 当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
193
194  ```ts
195  GridRow({ gutter: { x: 20, y: 50 } }){}
196  ```
197
198  ![](figures/gutter2.png)
199
200
201
202### 排列方向
203
204通过GridRow的direction属性设置栅格子组件在栅格容器中的排列方向。
205
206- 子组件默认从左往右排列。
207
208  ```ts
209  GridRow({ direction: GridRowDirection.Row }){}
210  ```
211  ![](figures/direction1.png)
212
213- 子组件从右往左排列。
214
215  ```ts
216  GridRow({ direction: GridRowDirection.RowReverse }){}
217  ```
218
219  ![](figures/direction2.png)
220
221
222
223## 栅格子组件GridCol
224
225GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span，offset，order的值。
226
227- span的设置
228
229  ```ts
230  GridCol({ span: 2 }){}
231  GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
232  GridCol(){}.span(2)
233  GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })
234  ```
235
236- offset的设置
237
238  ```ts
239  GridCol({ offset: 2 }){}
240  GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
241  GridCol(){}.offset(2)
242  GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 })
243  ```
244
245- order的设置
246
247  ```ts
248  GridCol({ order: 2 }){}
249  GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
250  GridCol(){}.order(2)
251  GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })
252  ```
253
254  下面使用传参的方式演示各属性的使用。
255
256### span
257
258子组件占栅格布局的列数，决定了子组件的宽度，默认为1。
259
260- 当类型为number时，子组件在所有尺寸设备下占用的列数相同。
261
262  ```ts
263  GridRow({ columns: 8 }) {
264    ForEach(this.bgColors, (color, index) => {
265      GridCol({ span: 2 }) {
266        Row() {
267          Text(`${index}`)
268        }.width("100%").height("50vp")
269      }
270      .backgroundColor(color)
271    })
272  }
273  ```
274
275  ![](figures/span1.png)
276
277- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
278
279  ```ts
280  GridRow({ columns: 8 }) {
281    ForEach(this.bgColors, (color, index) => {
282      GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
283        Row() {
284          Text(`${index}`)
285        }.width("100%").height("50vp")
286      }
287      .backgroundColor(color)
288    })
289  }
290  ```
291
292  ![](figures/span2.gif)
293
294### offset
295
296栅格子组件相对于前一个子组件的偏移列数，默认为0。
297- 当类型为number时，子组件偏移相同列数。
298
299  ```ts
300  GridRow() {
301    ForEach(this.bgColors, (color, index) => {
302      GridCol({ offset: 2 }) {
303        Row() {
304          Text("" + index)
305        }.width("100%").height("50vp")
306      }
307      .backgroundColor(color)
308    })
309  }
310  ```
311
312  ![](figures/offset1.png)
313
314  栅格默认分成12列，每一个子组件默认占1列，偏移2列，每个子组件及间距共占3列，一行放四个子组件。
315
316
317- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
318
319  ```ts
320  GridRow() {
321    ForEach(this.bgColors, (color, index) => {
322      GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
323        Row() {
324          Text("" + index)
325        }.width("100%").height("50vp")
326      }
327      .backgroundColor(color)
328    })
329  }
330  ```
331
332  ![](figures/offset2.gif)
333
334### order
335
336  栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较小的组件在前，较大的在后。
337  当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。
338
339
340- 当类型为number时，子组件在任何尺寸下排序次序一致。
341
342  ```ts
343  GridRow() {
344    GridCol({ order: 5 }) {
345      Row() {
346        Text("1")
347      }.width("100%").height("50vp")
348    }.backgroundColor(Color.Red)
349    GridCol({ order: 4 }) {
350      Row() {
351        Text("2")
352      }.width("100%").height("50vp")
353    }.backgroundColor(Color.Orange)
354    GridCol({ order: 3 }) {
355      Row() {
356        Text("3")
357      }.width("100%").height("50vp")
358    }.backgroundColor(Color.Yellow)
359    GridCol({ order: 2 }) {
360      Row() {
361        Text("4")
362      }.width("100%").height("50vp")
363    }.backgroundColor(Color.Green)
364  }
365  ```
366
367  ![](figures/order1.png)
368- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件排序次序设置。
369
370  ```ts
371  GridRow() {
372    GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) {
373      Row() {
374        Text("1")
375      }.width("100%").height("50vp")
376    }.backgroundColor(Color.Red)
377    GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) {
378      Row() {
379        Text("2")
380      }.width("100%").height("50vp")
381    }.backgroundColor(Color.Orange)
382    GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) {
383      Row() {
384        Text("3")
385      }.width("100%").height("50vp")
386    }.backgroundColor(Color.Yellow)
387    GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) {
388      Row() {
389        Text("4")
390      }.width("100%").height("50vp")
391    }.backgroundColor(Color.Green)
392  }
393  ```
394
395  ![](figures/order2.gif)
396
397
398