鸿蒙HarmonyOS实战-ArkUI组件（GridRow/GridCol）

一、GridRow/GridCol

1.概述

栅格结构是一种通用的辅助定位工具，可以资助开发职员办理多尺寸多装备的动态结构题目。通过将页面分别为等宽的列数和行数，栅格结构提供了可循的规律性结构，方便开发职员对页面元素举行定位和排版。
别的，栅格结构还提供了一种同一的定位标注，资助包管差别装备上各个模块的结构同等性，镌汰操持和开发的复杂度，进步工作服从。栅格结构还具有机动的间距调解方法，可以满意特殊场景结构调解的需求。
同时，主动换行和自顺应功能使得栅格结构可以大概完成一对多结构，并主动顺应差别装备上的排版。在栅格结构中，栅格容器组件GridRow与栅格子组件GridCol必要团结使用，共同构建出栅格结构场景。
2.栅格容器GridRow

2.1 栅格体系断点

在GridRow栅格组件中，开发者可以使用breakpoints自界说修改断点的取值范围，最多支持6个断点。除了默认的四个断点以外，还可以启用xl，xxl两个断点，支持六种差别尺寸（xs, sm, md, lg, xl, xxl）装备的结构设置。
定于如下：

1. breakpoints: {
2.   value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
3.   reference: BreakpointsReference.WindowSize
4. }

复制代码

案比方下：

1. @Entry
2. @Component
3. struct Index {
4.   @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
5.   build() {
6.     GridRow({
7.       breakpoints: {
8.         value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
9.         reference: BreakpointsReference.WindowSize //断点切换参考物
10.       }
11.     }) {
12.       ForEach(this.bgColors, (color, index) => {
13.         GridCol({
14.           span: {
15.             xs: 2, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
16.             sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
17.             md: 4, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
18.             lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
19.             xl: 8, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
20.             xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
21.           }
22.         }) {
23.           Row() {
24.             Text(`${index}`)
25.           }.width("100%").height('50vp')
26.         }.backgroundColor(color)
27.       })
28.     }
29.   }
30. }

复制代码

2.2 结构的总列数

栅格结构的列数是指将页面宽度分为多少平分，一样寻常环境下栅格结构的列数为12列，即将页面宽度分为12平分，每列所占宽度相称。如许可以方便地将页面元素放置到网格体系中，到达快速搭建页面的目的。同时，栅格结构的列数也可以根据具体的需求举行调解，并不愿定非要是12列。
1、默认列数
columns默认值为12，即在未设置columns时，任何断点下，栅格结构被分成12列。

1. @Entry
2. @Component
3. struct Index {
4.   @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
5.   build() {
6.     GridRow() {
7.       ForEach(this.bgColors, (item, index) => {
8.         GridCol() {
9.           Row() {
10.             Text(`${index + 1}`)
11.           }.width('100%').height('50')
12.         }.backgroundColor(item)
13.       })
14.     }
15.   }
16. }        

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金