第十四讲_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)

      GridItem()
        .rowStart(2)
        .rowEnd(3)
        .columnStart(1)
        .columnEnd(2)
        .backgroundColor(Color.Yellow)
    }
    // 分成3行，每行等分高度
    .rowsTemplate("1fr 1fr 1fr")
    // 分成3列，每列等分宽度
    .columnsTemplate("1fr 1fr 1fr")

  }
}

ps：行号和列号的起始序号都是0。

4. 绘画一个计算机界面

@Entry
@Component
struct GridLayout {
  build() {
    Grid() {
      // 第一行内容
      GridItem(){
        Text("0")
          .fontSize(50)
      }
        .rowStart(0)
        .rowEnd(0)
        .columnStart(0)
        .columnEnd(3)
        .backgroundColor(Color.Pink)
        // 设置子元素水平尾部、垂直居中对齐
        .align(Alignment.End)

      // 第二行内容
      GridItem() {
        Text("CE")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(0)
        .columnEnd(0)
        .backgroundColor(Color.Pink)
      GridItem() {
        Text("C")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(1)
        .columnEnd(1)
        .backgroundColor(Color.Pink)
      GridItem() {
        Text("/")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(2)
        .columnEnd(2)
        .backgroundColor(Color.Pink)
      GridItem() {
        Text("*")
      }
        .rowStart(1)
        .rowEnd(1)
        .columnStart(3)
        .columnEnd(3)
        .backgroundColor(Color.Pink)

      // 第三行内容
      GridItem() {
        Text("7")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(0)
      .columnEnd(0)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("8")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(1)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("9")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("-")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(3)
      .columnEnd(3)
      .backgroundColor(Color.Pink)

      // 第四行内容
      GridItem() {
        Text("4")
      }
      .rowStart(3)
      .rowEnd(3)
      .columnStart(0)
      .columnEnd(0)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("5")
      }
      .rowStart(3)
      .rowEnd(3)
      .columnStart(1)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("6")
      }
      .rowStart(3)
      .rowEnd(3)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("+")
      }
      .rowStart(2)
      .rowEnd(2)
      .columnStart(3)
      .columnEnd(3)
      .backgroundColor(Color.Pink)

      // 第五行内容
      GridItem() {
        Text("1")
      }
      .rowStart(4)
      .rowEnd(4)
      .columnStart(0)
      .columnEnd(0)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("2")
      }
      .rowStart(4)
      .rowEnd(4)
      .columnStart(1)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("3")
      }
      .rowStart(4)
      .rowEnd(4)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)

      // 第六行内容
      GridItem() {
        Text("0")
      }
      .rowStart(5)
      .rowEnd(5)
      .columnStart(0)
      .columnEnd(1)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text(".")
      }
      .rowStart(5)
      .rowEnd(5)
      .columnStart(2)
      .columnEnd(2)
      .backgroundColor(Color.Pink)
      GridItem() {
        Text("=")
      }
      .rowStart(4)
      .rowEnd(5)
      .columnStart(3)
      .columnEnd(3)
      .backgroundColor(Color.Pink)
    }
    // 分成6行，第一行是其他行的高度两倍
    .rowsTemplate("2fr 1fr 1fr 1fr 1fr 1fr")
    // 分成4列，每列等宽
    .columnsTemplate("1fr 1fr 1fr 1fr")
    // 列间距10
    .columnsGap(10)
    // 行间距10
    .rowsGap(10)
  }
}

ps：为了便于初学者理解，上面代码没有采用forever的方式创建子组件

5. 可滚动的网格布局

在设置Grid的行列数量与占比时，仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。

• 仅设置rowsTemplate属性，在水平方向可滚动
• 仅设置columnsTemplate属性，在垂直方向可滚动

@Entry
@Component
struct GridLayout {
  build() {
    Grid() {
      GridItem()
        .width(200)
        .backgroundColor(Color.Pink)
      GridItem()
        .width(200)
        .backgroundColor(Color.Blue)
      GridItem()
        .width(200)
        .backgroundColor(Color.Brown)
      GridItem()
        .width(200)
        .backgroundColor(Color.Gray)
    }
    // 等分成2行
    .rowsTemplate("1fr 1fr")
    // 列间距10
    .columnsGap(10)
    // 行间距10
    .rowsGap(10)
  }
}