鸿蒙~ArkUI 基础 Grid网格布局_arkui grid 高度自适应 rowstemplate

一、设置排列方式

• 设置行列数量与占比
  通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列的宽度

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Grid() {
      GridItem() {
        Text("1")
      }.backgroundColor(Color.Black)

      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)

      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)

      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)

      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)

      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)

      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)

      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)

      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 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
48

• 设置子组件所占行列数
  除了大小相同的等比例网格布局，由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分常见，如下图所示。在Grid组件中，通过设置GridItem的rowStart、rowEnd、columnStart和columnEnd可以实现如图所示的单个网格横跨多行或多列的场景。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Grid() {
      GridItem() {
        Text("1")
      }
      .backgroundColor(Color.Black)
      .columnStart(1)
      .columnEnd(3)

      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)

      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)

      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)


      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)

      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)

      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)

      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)

      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 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
48
49
50
51
52

• 设置主轴方向
  使用Grid构建网格布局时，若没有设置行列数量与占比，可以通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量

1. layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效，此时元素在layoutDirection方向上排列。

2. 仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。

3. 仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。

• 设置行列间距
  通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。在图5所示的计算器中，行间距为15vp，列间距为10vp。

最后

鸿蒙浪潮已势不可挡，不少互联网人看到先机，想要抢占风口，换道领跑，实现遥遥领先！

但是想要学习，网上的资料肯定会相当不足，这里推荐大家直接参考华为官网发布的《鸿蒙开发学习指南》文档。为了方便大家查阅，这里都整理好了，同时自己也整了一份学习路线图，由于路线图太大，不好展示，有需要的直接扫描下方二维码直接免费获取。

《鸿蒙零基础入门学习指南》

《鸿蒙开发学习之UI》

《鸿蒙学习之Web》

《鸿蒙学习之应用模型》