鸿蒙开发(一百五十七):Grid 设置主轴方向

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

declare enum GridDirection {
    Row,
    Column,
    RowReverse,
    ColumnReverse
}

Row

主轴布局方向沿水平方向布局，即自左往右先填满一行，再去填下一行。

首先，我们把要展示的数据放在一个数组里，例如这里的 datas。

@Entry
@Component
struct Index {
  datas: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    
  }
}

接着，使用 Grid 作为 build 函数的根组件，ForEach 遍历存放数据的数组，并在 GridItem 组件中展示数据。

@Entry
@Component
struct Index {
  datas: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Grid() {
      ForEach(this.datas, (item: number) => {
        GridItem() {
          Text(item.toString())
            .fontSize(32)
        }
      })
    }
  }
}

最后，设置 Grid 的布局方向为 Row（水平排列）。

@Entry
@Component
struct Index {
  datas: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Grid() {
      ForEach(this.datas, (item: number) => {
        GridItem() {
          Text(item.toString())
            .fontSize(32)
        }
      })
    }
    // 设置方向
    .layoutDirection(GridDirection.Row)
  }
}

运行结果：

从运行结果来看，所有数字排在了一行。

我们可以使用 minCount 和 maxCount 来限制主轴上 GridItem 的数量。

例如，一行最多排 3 个。

Grid() {
  ForEach(this.datas, (item: number) => {
    GridItem() {
      Text(item.toString())
        .fontSize(32)
    }
  })
}
// 设置方向
.layoutDirection(GridDirection.Row)
// 最大数量
.maxCount(3)

运行结果：

从运行结果来看，9 个数字一行排 3 个，一共 3 行。

Column

主轴布局方向沿垂直方向布局，即自上往下先填满一列，再去填下一列。

基于上述程序，将 GridDirection.Row 改为 GridDirection.Column。

运行结果：

RowReverse

主轴布局方向沿水平方向反向布局，即自右往左先填满一行，再去填下一行。

基于上述程序，将 GridDirection.Row 改为 GridDirection.RowReverse。

运行结果：

ColumnReverse

主轴布局方向沿垂直方向反向布局，即自下往上先填满一列，再去填下一列。

基于上述程序，将 GridDirection.Row 改为 GridDirection.ColumnReverse。

运行结果：

最后说明：

• layoutDirection 属性仅在不设置 rowsTemplate 和 columnsTemplate 时生效，此时元素在 layoutDirection 方向上排列。
• 仅设置 rowsTemplate 时，Grid 主轴为水平方向，交叉轴为垂直方向。
• 仅设置 columnsTemplate 时，Grid 主轴为垂直方向，交叉轴为水平方向。