第十四讲_ArkUI网格布局（Grid/GridItem）_arkui占满父类

1. 网格布局概述

• 网格布局是由“行”和“列”分割的单元格所组成，是一种自适应布局。
• ArkUI 提供了 Grid 容器组件和子组件 GridItem，用于构建网格布局。
• Grid 容器组件默认占满父容器。

2. Grid的使用

2.1 设置网格布局的行列数量与占比

Grid 组件提供了 rowsTemplate 和 columnsTemplate 属性用于设置网格布局行列数量与尺寸占比。

@Entry
@Component
struct GridLayout {
  build() {
    Grid() {

    }
    // 垂直方向分成3份，每行占一份
    .rowsTemplate("1fr 1fr 1fr")
    // 水平方向分成4份，第一列占1份，第二列占2份，第三列占1份
    .columnsTemplate("1fr 2fr 1fr")
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

2.2 设置网格布局的行列间距

Grid 组件通过 rowsGap 和 columnsGap 属性设置网格布局的行列间距。

@Entry
@Component
struct GridLayout {
  build() {
    Grid() {

    }
    // 垂直方向分成3份，每行占一份
    .rowsTemplate("1fr 1fr 1fr")
    // 水平方向分成4份，第一列占1份，第二列占2份，第三列占1份
    .columnsTemplate("1fr 2fr 1fr")
    // 行间距
    .rowsGap(10)
    // 列间距
    .columnsGap(10)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. GridItem的使用

3.1 设置GridItem所占行列数

GridItem 组件通过设置 rowStart（起始行号）、rowEnd（终点行号）、columnStart（起始列号）和 columnEnd（终点列号）属性，表示子组件所占行列数。

@Entry
@Component
struct GridLayout {
  build() {
    Grid() {
      GridItem()
        .rowStart(0)
        .rowEnd(0)
        .columnStart(0)
        .columnEnd(1)
        .backgroundColor(Color.Red)

      GridItem()
        .rowStart(0)
        .rowEnd(1)
        .columnStart(2)
        .columnEnd(1)
        .backgroundColor(Color.Orange)

      GridItem()
        .rowStart(1)
        .rowEnd(2)
        .columnStart(0)
        .columnEnd(0)
        .backgroundColor(Color.Blue)

      GridItem()
        .rowStart(1)
        .rowEnd(1)
        .columnStart(1)
        .columnEnd(1)
        .backgroundColor(Color.Pink)

      GridItem()
        .rowStart(2)
        .rowEnd(3)
        .columnStart(1)
        .columnEnd(2)
        .backgroundColor(Color.Yellow)
    }
    // 分成3行，每行等分高度
    .rowsTemplate("1fr 1fr 1fr")
    // 分成3列，每列等分宽度
    .columnsTemplate("1fr 1fr 1fr")

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

ps：行号和列号的起始序号都是0。

4. 绘画一个计算机界面

@Entry
@Component
struct GridLayout {
  build() {
    Grid() {
      // 第一行内容
      GridItem(){
        Text("0")
          .fontSize(50)
      }
        .rowStart(0)
        .rowEnd(0)
        .columnStart(0)
        .columnEnd(3)
        .backgroundColor(Color.Pink)
        // 设置子元素水平尾部、垂直居中对齐
        .align(Alignment.End)

      // 第二行内容
      GridItem() {
        Text("CE")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(0)
        .columnEnd(0)
        .backgroundColor(Color.Pink)
      GridItem() {
        Text("C")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(1)
        .columnEnd(1)
        .backgroundColor(Color.Pink)
      GridItem() {
        Text("/")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(2)
        .columnEnd(2)
        .backgroundColor(Color.Pink)
      GridItem() {
        Text("*")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(3)
        .columnEnd(3)
        .backgroundColor(Color.Pink)

      // 第三行内容
      GridItem() {
        Text("7")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(0)
      .columnEnd(0)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("8")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(1)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("9")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("-")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(3)
      .columnEnd(3)
      .backgroundColor(Color.Pink)

      // 第四行内容
      GridItem() {
        Text("4")
      }
      .rowStart(3)
      .rowEnd(3)
      .columnStart(0)
      .columnEnd(0)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("5")
      }
      .rowStart(3)
      .rowEnd(3)
      .columnStart(1)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("6")
      }
      .rowStart(3)
      .rowEnd(3)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("+")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(3)
      .columnEnd(3)
      .backgroundColor(Color.Pink)

      // 第五行内容
      GridItem() {
        Text("1")
      }
      .rowStart(4)
      .rowEnd(4)
      .columnStart(0)
      .columnEnd(0)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("2")
      }
      .rowStart(4)
      .rowEnd(4)
      .columnStart(1)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("3")
      }
      .rowStart(4)
      .rowEnd(4)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)

      // 第六行内容
      GridItem() {
        Text("0")
      }
      .rowStart(5)
      .rowEnd(5)
      .columnStart(0)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text(".")
      }
      .rowStart(5)
      .rowEnd(5)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("=")
      }
      .rowStart(4)
      .rowEnd(5)
      .columnStart(3)
      .columnEnd(3)
      .backgroundColor(Color.Pink)
    }
    // 分成6行，第一行是其他行的高度两倍
    .rowsTemplate("2fr 1fr 1fr 1fr 1fr 1fr")
    // 分成4列，每列等宽
    .columnsTemplate("1fr 1fr 1fr 1fr")
    // 列间距10
    .columnsGap(10)
    // 行间距10
    .rowsGap(10)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

ps：为了便于初学者理解，上面代码没有采用ForEach的方式创建子组件

5. 可滚动的网格布局

在设置Grid的行列数量与占比时，仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。

• 仅设置rowsTemplate属性，在水平方向可滚动
• 仅设置columnsTemplate属性，在垂直方向可滚动

@Entry
@Component
struct GridLayout {
  build() {
    Grid() {
      GridItem()
        .width(200)
        .backgroundColor(Color.Pink)
      GridItem()
        .width(200)
        .backgroundColor(Color.Blue)
      GridItem()
        .width(200)
        .backgroundColor(Color.Brown)
      GridItem()
        .width(200)
        .backgroundColor(Color.Gray)
    }
    // 等分成2行
    .rowsTemplate("1fr 1fr")
    // 列间距10
    .columnsGap(10)
    // 行间距10
    .rowsGap(10)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26