鸿蒙 ArkUI 基础 Grid 网格布局详解

鸿蒙 ArkUI 基础 Grid 网格布局详解

Grid 组件是 ArkUI 中用于实现二维网格布局的核心组件。它允许开发者将子组件按照行和列进行排列，支持灵活的行列数量定义、跨行跨列布局以及间距控制。本文将详细介绍 Grid 组件的各项属性与使用场景。

一、设置排列方式

通过设置 rowsTemplate 和 columnsTemplate 属性可以确定网格布局的整体结构。这两个属性的值是由多个空格分隔的字符串组成，每个部分代表一行或一列的尺寸定义。

1. 尺寸单位与占比

• fr (fraction)：表示比例。例如 2fr 表示该列占据剩余空间的 2/3（如果有两列分别为 1fr 和 2fr）。
• px / vp：固定像素或视口单位。
• auto：根据内容自适应。

@Entry
@Component
struct Index {
  build() {
    Grid() {
      // 第一行
      GridItem() {
        Text("1")
      }.backgroundColor(Color.Black)

      // 第二行
      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)

      // 第三行
      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)
    }
    .rowsTemplate('1fr 2fr 1fr')
    .columnsTemplate('1fr 1fr 1fr')
  }
}

上述代码中，rowsTemplate('1fr 2fr 1fr') 定义了 3 行，高度比例分别为 1:2:1。columnsTemplate('1fr 1fr 1fr') 定义了 3 列，宽度均等。

二、设置子组件所占行列数

在实际应用中，经常需要某个元素横跨多行或多列。在 Grid 组件中，可以通过设置 GridItem 的 rowStart, , , 来实现。