鸿蒙应用开发从入门到实战（二十四）：一文搞懂ArkUI网格布局

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI提供了各种布局组件用于界面布局，本文研究使用Grid组件实现网格布局。
一、概述

网格布局（Grid）是一种强大的布局方案，它将页面划分为行和列组成的网格，然后将页面内容在二维网格中进行自由的定位，以下效果都可通过网格布局实现

网格布局的容器组件为 Grid，子组件为 GridItem，具体语法如下
代码

1. Grid() {
2.   GridItem() {
3.     Text('GridItem')   
4.   }
5.   GridItem() {
6.     Text('GridItem')   
7.   }
8.   GridItem() {
9.     Text('GridItem')   
10.   }
11.   GridItem() {
12.     Text('GridItem')   
13.   }
14.   ......
15. }

复制代码

效果

二、常用属性

2.1 划分网格

Grid组件支持自定义行数和列数以及每行和每列的尺寸大小，上述内容需要使用rowsTemplate()方法和columnsTemplate()方法进行设置，具体用法如下
代码

1. Grid() {
2.   ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
3.     GridItem() {
4.       Text(item.toString())
5.         .itemTextStyle()
6.     }
7.   })
8. }
9. .width(320)
10. .height(240)
11. .rowsTemplate('1fr 1fr 1fr')
12. .columnsTemplate('1fr 2fr 1fr')
13. .gridStyle()

复制代码

效果

说明：
fr为 fraction(比例、分数) 的缩写。fr的个数表示网格布局的行数或列数，fr前面的数值大小，表示该行或列的尺寸占比。
示例代码
pages/layout目录下新建grid目录，新建GridBasic.ets文件

1. @Entry
2. @Component
3. struct GridBasic {
4.   build() {
5.     Column() {
6.       Grid() {
7.         ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => {
8.           GridItem() {
9.             Text(item.toString())
10.               .itemTextStyle12()
11.           }
12.         })
13.       }
14.       .width(320)
15.       .height(240)
16.       .rowsTemplate('1fr 1fr 1fr')
17.       .columnsTemplate('1fr 2fr 1fr')
18.       .gridStyle12()
19.     }.width('100%')
20.     .height('100%')
21.     .justifyContent(FlexAlign.Center)
22.   }
23. }
25. @Extend(Text) function itemTextStyle12() {
26.   .height('100%')
27.   .width('100%')
28.   .textAlign(TextAlign.Center)
29.   .fontColor(Color.White)
30.   .fontSize(40)
31.   .fontWeight(FontWeight.Bold)
32.   .backgroundColor('#008a00')
33.   .borderWidth(1)
34. }
36. @Extend(Grid) function gridStyle12() {
37.   .backgroundColor('#f5f5f5')
38.   .borderWidth(1)
39. }

复制代码

2.2 子组件所占行列数

GridItem组件支持横跨几行或者几列，如下图所示

可以使用columnStart()、columnEnd()、rowStart()和rowEnd()方法设置 GridItem 组件所占的单元格，其中rowStart和rowEnd属性表示当前子组件的起始行号和终点行号，columnStart和columnEnd属性表示指定当前子组件的起始列号和终点列号。
说明：
Grid容器中的行号和列号均从0开始。
具体用法如下
代码：

1. Grid() {
2.   GridItem() {
3.     Text('1')
4.       .itemTextStyle()
5.   }.rowStart(0).rowEnd(1).columnStart(0).columnEnd(1)
7.   GridItem() {
8.     Text('2')
9.       .itemTextStyle()
10.   }
12.   GridItem() {
13.     Text('3')
14.       .itemTextStyle()
15.   }
17.   GridItem() {
18.     Text('4')
19.       .itemTextStyle()
20.   }
21.   GridItem() {
22.     Text('5')
23.       .itemTextStyle()
24.   }.columnStart(1).columnEnd(2)
25. }
26. .width(320)
27. .height(240)
28. .rowsTemplate('1fr 1fr 1fr')
29. .columnsTemplate('1fr 2fr 1fr')
30. .gridStyle()

复制代码

效果：

示例代码
pages/layout/grid目录，新建StartAndEndPage.ets文件

1. @Entry
2. @Component
3. struct StartAndEndPage {
4.   build() {
5.     Column() {
6.       Grid() {
7.         GridItem() {
8.           Text('1')
9.             .itemTextStyle13()
10.         }.rowStart(0).rowEnd(1).columnStart(0).columnEnd(1)
12.         GridItem() {
13.           Text('2')
14.             .itemTextStyle13()
15.         }
17.         GridItem() {
18.           Text('3')
19.             .itemTextStyle13()
20.         }
22.         GridItem() {
23.           Text('4')
24.             .itemTextStyle13()
25.         }
27.         GridItem() {
28.           Text('5')
29.             .itemTextStyle13()
30.         }.columnStart(1).columnEnd(2)
31.       }
32.       .width(320)
33.       .height(240)
34.       .rowsTemplate('1fr 1fr 1fr')
35.       .columnsTemplate('1fr 2fr 1fr')
36.       .gridStyle13()
37.     }.width('100%')
38.     .height('100%')
39.     .justifyContent(FlexAlign.Center)
40.   }
41. }
43. @Extend(Text) function itemTextStyle13() {
44.   .height('100%')
45.   .width('100%')
46.   .textAlign(TextAlign.Center)
47.   .fontColor(Color.White)
48.   .fontSize(40)
49.   .fontWeight(FontWeight.Bold)
50.   .backgroundColor('#008a00')
51.   .borderWidth(1)
52. }
54. @Extend(Grid) function gridStyle13() {
55.   .backgroundColor('#f5f5f5')
56.   .borderWidth(1)
57. }

复制代码

2.3 行列间距

使用rowsGap()和columnsGap()属性，可以控制行列间距，具体用法如下
代码

1. Grid() {
2.   ......
3. }
4. .columnsGap(20)
5. .rowsGap(20)

复制代码

效果

示例代码
pages/layout/grid目录，新建GridGap.ets文件

1. @Entry
2. @Component
3. struct GridGap {
4.   build() {
5.     Column() {
6.       Grid() {
7.         GridItem() {
8.           Text('1')
9.             .itemTextStyle14()
10.         }.rowStart(0).rowEnd(1).columnStart(0).columnEnd(1)
12.         GridItem() {
13.           Text('2')
14.             .itemTextStyle14()
15.         }.rowStart(0).rowEnd(1)
18.         GridItem() {
19.           Text('3')
20.             .itemTextStyle14()
21.         }
23.         GridItem() {
24.           Text('4')
25.             .itemTextStyle14()
26.         }.columnStart(1).columnEnd(2)
27.       }
28.       .width(320)
29.       .height(240)
30.       .rowsTemplate('1fr 1fr 1fr')
31.       .columnsTemplate('1fr 2fr 1fr')
32.       .gridStyle14()
33.       .rowsGap(20)
34.       .columnsGap(20)
35.     }.width('100%')
36.     .height('100%')
37.     .justifyContent(FlexAlign.Center)
38.   }
39. }
41. @Extend(Text) function itemTextStyle14() {
42.   .height('100%')
43.   .width('100%')
44.   .textAlign(TextAlign.Center)
45.   .fontColor(Color.White)
46.   .fontSize(40)
47.   .fontWeight(FontWeight.Bold)
48.   .backgroundColor('#008a00')
49.   .borderWidth(1)
50. }
52. @Extend(Grid) function gridStyle14() {
53.   .backgroundColor('#f5f5f5')
54.   .borderWidth(1)
55. }

复制代码

三、计算器案例

使用网格布局实现如下布局效果

示例代码
pages/layout/grid目录，新建CalculatorPage.ets文件

1. @Entry
2. @Component
3. struct CalculatorPage {
4.   build() {
5.     Column() {
6.       Grid() {
7.         GridItem() {
8.           Text('0')
9.             .screenTextStyle()
10.         }.columnStart(0).columnEnd(3)
12.         GridItem() {
13.           Text('CE')
14.             .buttonTextStyle()
15.         }
17.         GridItem() {
18.           Text('C')
19.             .buttonTextStyle()
20.         }
22.         GridItem() {
23.           Text('÷')
24.             .buttonTextStyle()
25.         }
27.         GridItem() {
28.           Text('x')
29.             .buttonTextStyle()
30.         }
32.         GridItem() {
33.           Text('7')
34.             .buttonTextStyle()
35.         }
37.         GridItem() {
38.           Text('8')
39.             .buttonTextStyle()
40.         }
42.         GridItem() {
43.           Text('9')
44.             .buttonTextStyle()
45.         }
47.         GridItem() {
48.           Text('-')
49.             .buttonTextStyle()
50.         }
52.         GridItem() {
53.           Text('4')
54.             .buttonTextStyle()
55.         }
57.         GridItem() {
58.           Text('5')
59.             .buttonTextStyle()
60.         }
62.         GridItem() {
63.           Text('6')
64.             .buttonTextStyle()
65.         }
67.         GridItem() {
68.           Text('+')
69.             .buttonTextStyle()
70.         }
72.         GridItem() {
73.           Text('1')
74.             .buttonTextStyle()
75.         }
77.         GridItem() {
78.           Text('2')
79.             .buttonTextStyle()
80.         }
82.         GridItem() {
83.           Text('3')
84.             .buttonTextStyle()
85.         }
87.         GridItem() {
88.           Text('=')
89.             .buttonTextStyle()
90.             .backgroundColor('#1aa1e2')
91.         }.rowStart(4).rowEnd(5)
93.         GridItem() {
94.           Text('0')
95.             .buttonTextStyle()
96.         }.columnStart(0).columnEnd(1)
98.         GridItem() {
99.           Text('.')
100.             .buttonTextStyle()
101.         }
102.       }
103.       .gridStyle15()
104.       .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
105.       .columnsTemplate('1fr 1fr 1fr 1fr')
106.     }.width('100%')
107.     .height('100%')
108.     .justifyContent(FlexAlign.Center)
109.   }
110. }
113. @Extend(Text) function screenTextStyle() {
114.   .backgroundColor('#bac8d3')
115.   .height('100%')
116.   .width('100%')
117.   .textAlign(TextAlign.End)
118.   .padding(10)
119.   .borderRadius(10)
120.   .borderWidth(1)
121.   .fontSize(40)
122.   .fontWeight(FontWeight.Bold)
123. }
125. @Extend(Text) function buttonTextStyle() {
126.   .backgroundColor('#f5f5f5')
127.   .height('100%')
128.   .width('100%')
129.   .textAlign(TextAlign.Center)
130.   .padding(10)
131.   .borderRadius(10)
132.   .borderWidth(1)
133.   .fontSize(25)
134. }
136. @Extend(Grid) function gridStyle15() {
137.   .width(320)
138.   .height(480)
139.   .borderRadius(10)
140.   .borderWidth(1)
141.   .padding(10)
142.   .rowsGap(10)
143.   .columnsGap(10)
144. }

复制代码

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！