鸿蒙Grid、GridItem

 欢迎喜欢鸿蒙的小伙伴们加入我的学习圈：

名额只限十人

新人福利：佩奇的相关课程，实战课程免费看

问题答疑，社群答疑，各种资料文档免费看

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

Grid定义介绍

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

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)

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;
}

• 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 缓存数量。

Grid事件介绍

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

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

6.3.3：GridItem定义介绍

interface GridItemInterface {
  (): GridItemAttribute;
}

GridItem 为无参定义

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;
}

• rowStart：设置当前 item 起始行号。0开始
• rowEnd：设置当前 item 结束行号。
• columnStart：设置当前 item 起始列号。0开始
• 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)

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

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

6.3.5：完整样例演示

@Entry
@Component
struct GridPageTest {

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

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

2024鸿蒙4.0+next入门到实战教程，课程一对一答疑，答疑社群，源码
资料领取-》
https://item.taobao.com/item.htm?ft=t&id=761209890044