harmony next ，格栅布局之初见-CFANZ编程社区

鸿蒙开发中的栅格布局是一种基于固定或可变单元格的布局系统，主要用于组织和对齐页面上的元素，使其在不同屏幕尺寸下都能保持一致性和美观性。以下是关于鸿蒙开发中栅格布局的详解及简单实用示例：

栅格布局的组成部分

容器（Container） ：定义了栅格的边界。
行（Row） ：横向分割容器，包含列。
列（Column） ：纵向分割行，用于放置内容。
间隔（Gutter） ：列与列之间的空白空间。
单元格（Cell） ：列的别称，表示栅格中的一个基本单位。
断点（Breakpoint） ：定义布局在不同屏幕尺寸下的变化点。

栅格布局的断点规则

鸿蒙系统中，栅格系统默认将设备宽度分为 xs、sm、md、lg 四类，尺寸范围如下：

断点名称	取值范围（vp）	设备描述
xs	[0, 320）	最小宽度类型设备
sm	[320, 520)	小宽度类型设备
md	[520, 840)	中等宽度类型设备
lg	[840, +∞)	大宽度类型设备

开发者可以根据实际需求自定义断点，例如：

breakpoints: {value: ['100vp', '200vp']}

表示启用 xs、sm、md 共 3 个断点。

栅格布局的实现

在鸿蒙开发中，栅格布局通过 GridRow 和 GridCol 组件实现。

GridRow 组件

columns：设置不同断点下的总列数，默认为 12。
gutter：设置子元素在水平和垂直方向的间距。

GridCol 组件

span：设置子组件占栅格布局的列数，决定了子组件的宽度。
offset：设置栅格子组件相对于前一个子组件的偏移列数。
order：设置栅格子组件的序号，决定子组件的排列次序。

简单实用示例

以下是一个简单的栅格布局示例，展示如何根据断点调整列数和间距：

@Entry
@Component
struct ListDemo {
  @State ListData: Array<ProductItem> = [
    new ProductItem($r('app.media.p1'), '问界 新M7 Ultra'),
    new ProductItem($r('app.media.p1'), '问界 新M7 Ultra'),
    new ProductItem($r('app.media.p1'), '问界 新M7 Ultra'),
    new ProductItem($r('app.media.p1'), '问界 新M7 Ultra')
  ]

  build() {
    GridRow({
      columns: {
        sm: 4,
        md: 8,
        lg: 12
      },
      gutter: {
        x: {
          sm: 12,
          md: 16,
          lg: 24
        },
        y: {
          sm: 12,
          md: 16,
          lg: 24
        }
      }
    }) {
      ForEach(this.ListData, (item: ProductItem) => {
        GridCol({ span: { sm: 2, md: 2, lg: 2 } }) {
          Column() {
            Image(item.imageUrl).width('100%').height('100%')
            .aspectRatio(1)
            .backgroundColor('#E5E3E3')
            .borderRadius(6)
            .clip(true)
            Text(item.title)
              .margin({ top: 4 })
          }
          .margin({ bottom: 10 })
        }
      })
    }
  }
}