鸿蒙Next中数组如何分格显示为grid布局

在鸿蒙Next开发中，如何将数组数据以grid网格布局的形式展示？比如我有一个包含多个项目的数组，需要均匀排列成多行多列的网格样式，类似九宫格效果。具体应该使用什么组件或方法实现？求代码示例和布局参数设置的详细说明。

2 回复

鸿蒙Next里用GridContainer组件，一行代码搞定数组分格显示！比如：

GridContainer({ columns: 3 }) {
  ForEach(this.dataArray, item => {
    GridItem() { YourComponent(item) }
  })
}

像搭乐高一样简单，数据自动排排坐～

更多关于鸿蒙Next中数组如何分格显示为grid布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过ArkUI的Grid组件或Grid容器实现数组数据的分格显示为网格布局。以下是具体实现方法：

使用Grid组件

Grid组件是专门用于网格布局的容器，支持动态设置行列数量和间距。

示例代码：

@Entry
@Component
struct GridExample {
  private data: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']

  build() {
    Column() {
      Grid() {
        ForEach(this.data, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .backgroundColor(0xF5F5F5)
              .width('100%')
              .height('100%')
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr') // 3列等宽
      .rowsTemplate('1fr 1fr')        // 2行等高
      .columnsGap(10)                 // 列间距
      .rowsGap(10)                    // 行间距
      .height(300)
    }
    .width('100%')
    .padding(10)
  }
}

关键属性说明：

  • columnsTemplate：定义列宽（如'1fr 1fr 1fr'表示3列等分）
  • rowsTemplate：定义行高
  • columnsGap/rowsGap：设置间距
  • GridItem：每个网格项容器

自适应网格（推荐）：

Grid() {
  ForEach(this.data, (item: string) => {
    GridItem() {
      // 自定义内容
    }
  })
}
.columnsTemplate('1fr 1fr 1fr') // 固定列数
.layoutDirection(GridDirection.Row) // 排列方向

注意事项：

  1. 网格布局需配合GridItem使用
  2. 可通过flexGrow控制项的自适应
  3. 支持响应式布局断点配置

这种方法能高效实现数组数据的均匀网格分布，适用于图片墙、菜单等场景。

回到顶部