第十四讲_ArkUI网格布局（Grid/GridItem）

1. 网格布局概述

• 网格布局是由“行”和“列”分割的单元格所组成，是一种自适应布局。
• ArkUI 提供了 Grid 容器组件和子组件 GridItem，用于构建网格布局。
• Grid 容器组件默认占满父容器。

2. Grid的使用

2.1 设置网格布局的行列数量与占比

Grid 组件提供了 rowsTemplate 和 columnsTemplate 属性用于设置网格布局行列数量与尺寸占比。

@Entry
@Component
struct GridLayout {
   
  build() {
   
    Grid() {
   

    }
    // 垂直方向分成3份，每行占一份
    .rowsTemplate("1fr 1fr 1fr")
    // 水平方向分成4份，第一列占1份，第二列占2份，第三列占1份
    .columnsTemplate("1fr 2fr 1fr")
  }
}

2.2 设置网格布局的行列间距

Grid 组件通过 rowsGap 和 columnsGap 属性设置网格布局的行列间距。

@Entry
@Component
struct GridLayout {
   
  build() {
   
    Grid() {
   

    }
    // 垂直方向分成3份，每行占一份
    .rowsTemplate("1fr 1fr 1fr")
    // 水平方向分成4份，第一列占1份，第二列占2份，第三列占1份
    .columnsTemplate("1fr 2fr 1fr")
    // 行间距
    .rowsGap(10)
    // 列间距
    .columnsGap(10)
  }
}

3. GridItem的使用

3.1 设置GridItem所占行列数

GridItem 组件通过设置 rowStart（起始行号）、rowEnd（终点行号）、columnStart（起始列号）和 columnEnd（终点列号）属性，表示子组件所占行列数。

@Entry
@Component
struct GridLayout {
   
  build() {
   
    Grid() {
   
      GridItem()
        .rowStart(0)
        .rowEnd(0)
        .columnStart(0)
        .columnEnd(1)
        .backgroundColor(Color.Red)

      GridItem()
        .rowStart(0)
        .rowEnd(1)
        .columnStart(2)
        .columnEnd(1)
        .backgroundColor(Color.Orange)

      GridItem()
        .rowStart(1)
        .rowEnd(2)
        .columnStart(0)
        .columnEnd(0)
        .backgroundColor(Color.Blue)

      GridItem()
        .rowStart(1)
        .rowEnd(1)
        .columnStart(1)
        .columnEnd(1)
        .backgroundColor(Color.Pink