HarmonyOS NEXT练习：Grid布局

Grid网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。

接口

Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions)

scroller：可滚动组件的控制器。用于与可滚动组件进行绑定。说明：不允许和其他滚动类组件，如：List、Grid、Scroll等绑定同一个滚动控制对象。 layoutOptions：Grid布局选项。

设置行列数量与占比

• 通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。
• rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列宽度。

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

练习：GridPage

@Entry
@Component
struct GridPage {
  list: GridItemObj[] = [
    {
      icon: $r('sys.symbol.airplane_fill'),
      text: '飞行模式'
    },
    {
      icon: $r('sys.symbol.flashlight_off_fill'),
      text: '闪光灯'
    },
    {
      icon: $r('sys.symbol.moon_circle_fill'),
      text: '显示模式'
    },
    {
      icon: $r('sys.symbol.nfc_fill'),
      text: 'NFC'
    },
    {
      icon: $r('sys.symbol.alarm_fill_1'),
      text: '铃声'
    },
    {
      icon: $r('sys.symbol.wifi'),
      text: 'WiFi'
    },
    {
      icon: $r('sys.symbol.trash'),
      text: '回收站'
    },
    {
      icon: $r('sys.symbol.calendar'),
      text: '日历'
    },
  ]

  build() {
    Column({ space: 10 }) {
      Text('Grid练习')
      Grid() {
          ForEach(this.list, (item: GridItemObj) => {
            GridItem() {
              Column({space:10}) {
                SymbolGlyph(item.icon)
                  .renderingStrategy(SymbolRenderingStrategy.SINGLE)
                  .fontColor([Color.Black])
                Text(item.text)
                  .textAlign(TextAlign.Center)
              }
              .backgroundColor(0xF9CF93)
              .width('100%')
              .height('100%')
              .aspectRatio(1)
              .borderRadius(6)
              .clip(true)
              .padding(6)
              .justifyContent(FlexAlign.Center)
            }
          })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('100%')
      .height(200)
      .rowsGap(15)
      .columnsGap(10)
      .padding(20)
      Blank().layoutWeight(1)
    }.width('100%').margin({ top: 5 })
  }
}

interface GridItemObj {
  icon: Resource
  text: string
}