HarmonyOS应用开发：网格布局Grid_鸿蒙gridlayout

网格布局

网格布局（GridLayout）是自适应布局中一种重要的布局，具备较强的页面均分能力，子组件占比控制能力。 通过GridGrid容器组件和子组件GridItem实现， Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。优势如下：

1. 容器组件尺寸发生变化时，所有子组件以及间距等比例调整，实现布局的自适应能力。
2. 支持自定义网格布局行数和列数，以及每行每列尺寸占比。
3. 支持设置网格布局中子组件的行列间距。
4. 支持设置子组件横跨几行或者几列。

Grid

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

子组件

包含GridItem子组件。

接口

Grid(scroller?: Scroller)

属性

除支持通用属性外，还支持以下属性：

GridDirection8+枚举说明

事件

除支持通用事件外，还支持以下事件：

auto-fill说明

Grid的columnsTemplate、rowsTemplate属性的auto-fill仅支持以下格式：

repeat(auto-fill, track-size)

其中repeat、auto-fill为关键字。track-size为行高或者列宽，支持的单位包括px、vp、%或有效数字，track-size至少包括一个有效行高或者列宽。 

ItemDragInfo对象说明

示例：

// xxx.ets
@Entry
@Component
struct GridExample {
  @State Number: String[] = ['0', '1', '2', '3', '4']
 
  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.Number, (day: string) => {
          ForEach(this.Number, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
 
      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid() {
        ForEach(this.Number, (day: string) => {
          ForEach(this.Number, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
    }.width('100%').margin({ top: 5 })
  }
}

auto-fill示例：

// grid-autofill.ets
@Entry
@Component
struct Index {
  @State gridItemWidth: string = "100%"
  @State gridItemHeight: string = "100%"
  @State gridWidth: string = "100%"
  @State gridHeight: string = "100%"
  @State itemList: string[] = []
  build() {
    Column() {
      Grid() {
        ForEach(this.itemList, (item) => {
          GridItem() {
            Text(item.toString())
              .fontSize(16)
              .width('100%')
              .textAlign(TextAlign.Center)
          }
          .width(this.gridItemWidth)
          .height(this.gridItemHeight)
          .backgroundColor(0xF9CF93)
        }, item => item)
      }
      .columnsGap(1)
      .rowsGap(1)
      .border({ width: 4, color: 0xffdb7093, style: BorderStyle.Dashed, radius: 5 })
      .width(this.gridWidth)
      .height(this.gridHeight)
      .columnsTemplate("15% repeat(auto-fill, 10% 50px 20%) 50px")
      .rowsTemplate("150px repeat(auto-fill, 20% 25%)")
    }.margin(5)
  }
 
  aboutToAppear() {
    for(var i = 1; i < 50; i++) {
      this.itemList.push(i.toString())
    }
  }
}