# 6.3：Grid、GridItem

Grid 表示网格布局，它可以设置行数和列数，它和 List 类似，子组件只能是 GridItem 。

# 6.3.1：Grid定义介绍

interface GridInterface {
  (scroller?: Scroller): GridAttribute;
}

1
2
3

scroller：绑定一个滚动控制器，控制 Grid 的滚动。

简单样例如下所示：

样例运行结果如下图所示：

# 6.3.2：Grid属性介绍

declare class GridAttribute<T> extends CommonMethod<T> {
  columnsTemplate(value: string): T;
  rowsTemplate(value: string): T;
  columnsGap(value: number | string | Resource): T;
  rowsGap(value: number | string | Resource): T;
  cachedCount(value: number): T;
}

1
2
3
4
5
6
7

columnsTemplate：设置列数，默认值为 1fr ，表示 1 列，参数详解如下：
- 均分列表
  
  1fr 1fr 1fr 1fr 1fr：表示设置 Grid 为 5 列，并把 Grid 宽度均分为 5 份，每列宽度占用 1 份。
- 不均分列表
  
  1fr 2fr 3fr 1fr 1fr：表示设置 Grid 为 8 列，并把 Grid 宽度均分为 8 份，第一列占用 1 份，第二列占用 2 份，第三列占用 3 份，后两列每列占 1 份。
rowsTemplate：设置列数，默认值为 1fr ，表示 1 行，不设置时默认为 1 行，参数说明和 columnsTemplate 一致。
columnsGap：设置列与列的间距。
rowsGap：设置行与行的间距。
cachedCount：设置 Grid 缓存数量。

# 6.3.2：Grid事件介绍

declare class GridAttribute<T> extends CommonMethod<T> {
  onScrollIndex(event: (first: number) => void): T;
}

1
2
3

onScrollIndex：当前列表显示的起始位置 item 发生变化时触发该回调。

# 6.3.3：GridItem定义介绍

interface GridItemInterface {
  (): GridItemAttribute;
}

1
2
3

GridItem 为无参定义

# 6.3.4：GridItem属性介绍

declare class GridItemAttribute<T> extends CommonMethod<T> {
  rowStart(value: number): T;
  rowEnd(value: number): T;
  columnStart(value: number): T;
  columnEnd(value: number): T;
  forceRebuild(value: boolean): T;
}

1
2
3
4
5
6
7

rowStart：设置当前 item 起始行号。
rowEnd：设置当前 item 结束行号。
columnStart：设置当前 item 起始列号。
columnEnd：设置当前 item 结束列号。
forceRebuild：用于设置在触发组件 build 时是否重新创建此节点。

简单样例如下所示：

@Entry @Component struct ComponentTest {

  private columns: Array<String> = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

  build() {
    Column() {
      Grid() {
        ForEach(this.columns, (item: String, index: number) => {
          GridItem() {
            Text('Text: ' + item)
              .fontSize(20)
              .backgroundColor('#aabbcc')
              .width('100%')
              .height(70)
          }
          .columnStart(index == 0 ? 0 : 0) // 设置第一个Item布局从第一列开始
          .columnEnd(index == 0 ? 2 : 0)   // 设置第一个Item布局从第三列结束，也即是占满整行
        })
      }
      .columnsTemplate("1fr 1fr 1fr")      // 设置3列，每列均分
      .columnsGap(10)                      // 设置列间距
      .rowsGap(10)                         // 设置行间距
      .width('100%')
      .height(170)
      .backgroundColor(Color.Pink)
    }
    .padding(10)
    .width("100%")
    .height("100%")
  }
}

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

样例运行结果如下图所示：

样例中设置了 Grid 为 3 列，并且设置了第 1 个 GridItem 的列从 0 开始到 2 结束，所以 GridItem 就占满整行布局。

# 6.3.5：完整样例演示

@Entry @Component class MyView {

    var screenWidth: Float64 = 1080.0; // 屏幕宽度
    var rowSpace: Float64 = 10.0;      // 行间距
    var rowCount: Float64 = 5.0;       // 行数
    var columnSpace: Float64 = 15.0;   // 列间距
    var columnCount: Float64 = 4.0;    // 列数
    var itemSize: Float64 = (this.screenWidth - (this.columnSpace * (this.columnCount + 1.0))) / this.columnCount;               // Item尺寸

    var items: ArrayList<Int64> = ArrayList([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 18])

    func build() {
      Column() {
        Text("")
          .width(100.percent)
          .height(100.percent)
          .layoutWeight(1)
          .backgroundColor(0xffc0cb)

        Grid() {
          ForEach(this.items, itemGeneratorFunc: {item: Int64, index: Int64 => // ForEach语法
            GridItem() {
              Text("Text:${item}")
            }
            .width(100.percent)
            .height(100.percent)
            .backgroundColor(0xbbccdd)
            .rowStart(rowStart(index))       // 第16个GridItem占用2行
            .rowEnd(rowEnd(index))           // 第16个GridItem占用2行
            .columnStart(columnStart(index)) // 第17个GridItem占用2列
            .columnEnd(columnEnd(index))     // 第17个GridItem占用2列
          })
        }
        .padding(left: this.columnSpace, right: this.columnSpace)
        .columnsTemplate("1fr 1fr 1fr 1fr")  // Grid宽度均分成4份
        .rowsTemplate("1fr 1fr 1fr 1fr 1fr") // Grid高度均分成5份
        .rowsGap(10)                         // 设置行间距
        .columnsGap(15)                      // 设置列间距
        .width(100.percent)
        .height(400)
      }
      .width(100.percent)
      .height(100.percent)
    }

    func rowStart(index: Int64): Int32  {
      if (index == 15) {
        return 3;
      }
      return 0;
    }

    func rowEnd(index: Int64): Int32  {
      if (index == 15) {
        return 4;
      }
      return 0;
    }

    func columnStart(index: Int64): Int32  {
      return 0;
    }

    func columnEnd(index: Int64): Int32  {
      if (index == 16) {
        return 1;
      }
      return 0;
    }
}

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

样例运行结果如下图所示：

← 6.2：List、ListItem 6.4：Swiper →

请作者喝杯咖啡

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心