ArkUI 常用布局容器之栅格布局（GridRow/GrowCol）

一. 栅格布局概述

GridRow 为栅格容器组件，需与栅格子组件 GridCol 联合使用。感觉栅栏布局还是根据前端table布局演化而来，可以参考table来理解或者你可以把它想象成excel表格，但是不要真认为就是excel表格，不然就容易钻牛角尖。就以excel表格为例，想象把GridRow容器组件，默认情况下等分了12格子，这样我们就能通过子组件GridCol去填充这些格子。同样默认情况下，一个GridCol只能填充一个格子。例如

 GridRow容器组件 

GridCol1	GridCol2	GridCol3	GridCol4	GridCol5	GridCol6	GridCol7	GridCol8	GridCol9	GridCol10	GridCol11	GridCol12

可能有人问，如果GridCol数量超过了一行怎么半？这个你放心GridRow帮你做处理了，它会自动换到下一行，给你接着排的。例如

 GridRow容器组件 

GridCol1	GridCol2	GridCol3	GridCol4	GridCol5	GridCol6	GridCol7	GridCol8	GridCol9	GridCol10	GridCol11	GridCol12
GridCol13

可能有人问，如果规则一直是这样，那没啥太大的实用性，好待excel表格还能合并单元格呢？它也可以合并单元格，如果你不满足于每个GridCol默认只占一个，你也可以给GridCol设置占格子数量

 GridRow容器组件 

GridCol1		GridCol2	GridCol3	GridCol4	GridCol5	GridCol6	GridCol7	GridCol8	GridCol19	GridCol10	GridCol11
GridCol12	GridCol13

如果仅仅这样，那它也就仅仅是一个前端中的table表格布局。它还有个神奇的地方，就是“断点”。 它允许你在某些尺寸下，去重新选择GridCol所占格子的数量。这样做的好处就可以做到不同宽度尺寸下，你去做不同适配处理，以此来保证UI界面的美观性。

🔊说明：

栅格布局中将页面划分为等宽的列数和行数；
栅格布局中可以调整列与列之间和行与行之间的间距；
栅格布局中当页面元素的数量超出了一行或一列的容量时，自动换到下一行或下一列；

二. GridRow的使用

GridRow 有一个 GridRowOptions 配置项，这个配置项包含了breakpoints‌（断点），columns‌（栅栏列数），gutter‌（栅栏间距），direction‌（栅栏的方向）。

• columns‌：定义栅格列数，可以根据不同设备宽度调整列数。
• ‌gutter‌：定义栅格间距，可以设置不同方向的间距。
• ‌breakpoints‌：定义断点，用于在不同设备宽度下调整布局。
• ‌direction‌：定义栅格的方向，可以是水平或垂直。

1、设置栅栏断点（breakpoints‌）

栅格系统以设备的水平宽度作为断点依据，定义设备的宽度类型，形成了一套断点规则。

栅格系统默认断点将设备宽度分为 xs、sm、md、lg 四类：

• xs： 最小宽度类型设备 [0, 320）
• sm：小宽度类型设备 [320, 520)
• md：中等宽度类型设备 [520, 840)
• lg：  大宽度类型设备 [840, +∞)

🔔：这是系统默认的断点出发条件，就是说如果你没有自定义断点，当设备屏幕宽度变到这些范围临界值时，就会触发响应的

🐹 GridRow 自定义断点

GridRow 中通过 breakpoints 参数自定义修改断点的取值范围，最多支持 6 个断点：

• xs：最小宽度类型设备
• sm：小宽度类型设备
• md：中等宽度类型设备
• lg：大宽度类型设备
• xl：特大宽度类型设备
• xxl：超大宽度类型设备

GridRow({
  breakpoints: {
    // 表示启用xs、sm、md、lg、xl、xxl共6个断点，小于200vp为xs，200vp-300vp为sm，300vp-400vp为md，4000vp-500vp为lg，500vp-600vp为xl，大于600vp为xxl
    value: ["200vp", "300vp", "400vp", "500vp", "600vp"],
    reference: BreakpointsReference.WindowSize,
  },
});

🐹 应用断点适配不同宽度设备

GridRow 的 columns 参数，GridCol 的 span、offset 参数可以根据断点分别设置不同的值。

例如：GridRow 的 columns 参数设置

• xs（最小宽度类型设备）时，栅格布局的列数为2
• sm（小宽度类型设备）时，栅格布局的列数为2
• md（中等宽度类型设备）时，栅格布局的列数为4
• lg（大宽度类型设备）时，栅格布局的列数为4

2、设置栅格布局的总列数（columns‌）

GridRow 中通过 columns 参数设置栅格布局的总列数，columns 等于 12（默认值）。

🔔：示例代码中，设置栅格布局的Columns = 4，表示一行由以前默认等分的12个格子 4个GridCol子组件会占用一行。

3、设置栅格布局的排列方向（gutter‌）

GridRow 的 direction 参数来指定 GridCol 在栅格容器中的排列方向。

🐹 GridRowDirection.Row：从左往右排列（默认值）

🐹 GridRowDirection.RowReverse：从右往左排列

4、设置栅格布局中子组件间距（direction‌）

GridRow 中通过 gutter 参数设置子元素在水平（x轴）和垂直（y轴）方向的间距。

三. GridCol的使用

‌GridCol 有一个 GridColOptions 配置项，这个配置项包含了属性‌包括span、offset 和 order，这些属性用于定义栅格子组件在栅格布局中的行为和位置。

• ‌span‌：设置子组件占用栅格容器的列数。默认值为1，如果设置为0，则表示不参与布局计算，即不会被渲染‌12。
• ‌offset‌：栅格子组件相对于原本位置偏移的列数。默认值为0‌12。
• ‌order‌：元素的序号，用于对栅格子组件进行排序。默认值为0。当子组件不设置order或设置相同的order时，子组件按照代码顺序展示；当部分子组件设置order，部分不设置时，未设置order的子组件排序靠前，设置了order的子组件按照数值从小到大排列‌12。

1、设置一个GridCol占栅格布局的列数（span）

GridCol 中通过 span 参数设置在栅格布局中占的列数，span 等于 1（默认值）。

2、设置GridCol在栅格布局中偏移列数（offset）

GridCol 中通过 offset 参数设置在栅格布局中偏移的列数，offset 等于 0（默认值）。

3、设置GridCol在栅格布局中顺序（order）

GridCol 中通过 order 参数设置在栅格布局中排列顺序，order 等于0（默认）。order 较小的组件在前，较大的在后。没有设置order参数的，按照代码的先后顺序排列。

🔔：示例代码中，
第一个GridCol子组件没有设置order，order默认等于0；
第二个GridCol子组件设置order等于0；
第三个GridCol子组件设置order等于1；
第四个GridCol子组件没有设置order，order默认等于0；
第五个GridCol子组件设置order等于2。
所以最终显示的顺序为：第一个GridCol、第二个GridCol、第四个GridCol、第三个GridCol、第五个GridCol

四. 栅格组件的嵌套使用

栅格组件也可以嵌套使用，完成一些复杂的布局。

以下示例中，栅格把整个空间分为12份。第一层GridRow嵌套GridCol，分为中间大区域以及“footer”区域。第二层GridRow嵌套GridCol，分为“left”和“right”区域。子组件空间按照上一层父组件的空间划分，粉色的区域是屏幕空间的12列，绿色和蓝色的区域是父组件GridCol的12列，依次进行空间的划分。

@Entry
@Component
struct GridRowExample {
  build() {
    /**🌾：外层栅栏，默认12等分 */
    GridRow() { //子GridCol一个所占格子数刚好一行格子数，所以换行
      /** 这个GridCol要占12个格子 */
      GridCol({ span: { sm: 12 } }) { 
        /** 🌾：内层栅栏，默认12等分 */

        GridRow() { //子GridCol所占格子数刚好一行格子数，刚好不换行

          /** 这个GridCol要占2个格子 */
          GridCol({ span: { sm: 2 } }) {
            Row() {
              Text('left').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff41dbaa')

/** 这个GridCol要占10个格子 */
          GridCol({ span: { sm: 10 } }) {
            Row() {
              Text('right').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff4168db')
        }
        .backgroundColor('#19000000')
        .height('100%')
      }
      
      /** 这个GridCol要占12个格子 */
      GridCol({ span: { sm: 12 } }) {
        Row() {
          Text('footer').width('100%').textAlign(TextAlign.Center)
        }.width('100%').height('10%').backgroundColor(Color.Pink)
      }
    }.width('100%').height(300)
  }
}

综上所述，栅格组件提供了丰富的自定义能力，功能异常灵活和强大。只需要明确栅格在不同断点下的Columns、Margin、Gutter及span等参数，即可确定最终布局，无需关心具体的设备类型及设备状态（如横竖屏）等。