# 6.3:Grid、GridItem

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

# 6.3.1:Grid定义介绍

interface GridInterface {
  (scroller?: Scroller): GridAttribute;
}
1
2
3
  • scroller:绑定一个滚动控制器,控制 Grid 的滚动。

简单样例如下所示:

Grid() {
  ForEach(this.columns, (item) => { // ForEach语法,循环创建GridItem
    GridItem() {                    // 子组件只能是GirdItem
      Text('Text: ' + item)
        .fontSize(20)
        .backgroundColor('#aabbcc')
        .width('100%')
        .height(70)
    }
  })
}
.columnsTemplate("1fr 1fr 1fr")     // 设置Grid为3列,并且均分
.columnsGap(10)                     // 设置列间距为10vp
.rowsGap(10)                        // 设置行间距为10vp
.width('100%')
.height(170)
.backgroundColor(Color.Pink)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

6_3_1

# 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 时是否重新创建此节点。

简单样例如下所示:

Grid() {
  ForEach(this.columns, (item, index) => {
    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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

6_3_2

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

# 6.3.5:完整样例演示

@Entry @Component struct ComponentTest {

  private screenWidth: number = px2vp(1080); // 屏幕宽度
  private rowSpace: number = 10;             // 行间距
  private rowCount: number = 5;              // 行数
  private columnSpace: number = 15;          // 列间距
  private columnCount: number = 4;           // 列数
  private itemSize: number = (this.screenWidth - (this.columnSpace * (this.columnCount + 1))) / this.columnCount;														 // Item尺寸

  private items: number[] = [];

  build() {
    Column() {

      Text()
        .width('100%')
        .height('100%')
        .layoutWeight(1)
        .backgroundColor(Color.Pink)

      Grid() {
        ForEach(this.items, (item, index) => { // ForEach语法
          GridItem() {
            Text('Text:' + index)
          }
          .width('100%')
          .height('100%')
          .backgroundColor('#bbccdd')
          .rowStart(index == 15 ? 3 : 0)       // 第16个GridItem占用2行
          .rowEnd(index == 15 ? 4 : 0)         // 第16个GridItem占用2行
          .columnStart(index == 16 ? 0 : 0)    // 第17个GridItem占用2列
          .columnEnd((index == 16 ? 1 : 0))    // 第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(this.rowSpace)                  // 设置行间距
      .columnsGap(this.columnSpace)            // 设置列间距
      .width('100%')
      .height(this.itemSize * this.rowCount + this.rowSpace * (this.rowCount - 1))
    }
    .width('100%')
    .height('100%')
  }

  private aboutToAppear() {
    for(var i = 0; i < 18; i++) {
      this.items[i] = i;
    }
  }
}
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

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

6_3_3
(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2