栅格是多设备场景下通用的辅助定位工具，通过将空间分割为有规律的栅格。

GridRow为栅格容器组件，需与栅格子组件GridCol在栅格布局场景中联合使用。

栅格布局主要优势包括：

提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。
统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。
灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距，可以控制整个页面的排版效果。
自动换行和自适应：栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时，他们会自动换到下一行或下一列，并且在不同的设备上自适应排版，使得页面布局更加灵活和适应性强。

GridRow

GridRow(option?: GridRowOptions)

GridRowOptions对象

columns：布局列数
gutter：布局间隙

GutterOption

x：栅格子组件水平方向间距
y：栅格子组件垂直方向间距

breakpoints：断点设置

value：设置断点位置的单调递增数组
reference：断点切换参照物
- BreakpointReference枚举
  - WindowSize 以窗口为参照物
  - ComponentSize 以容器为参照物

diretion：布局排列方向

Row 栅格元素按照行方向排列
RowReverse 栅格元素按照逆序行方向排列

onBreakpointChange

onBreakpointChange(callback: (breakpoints: string) => void)

断点反生改变时触发回调

GridCol

GridCol(option?: GridColOptions)

GridColOptions对象说明

span：栅格子组件占用栅格容器组件的列数。span为0表示该元素不参与布局计算
offset：栅格子组件相对于原本位置偏移的列数
order：元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序

栅格组件的使用

方式一

GridRow({
    gutter: { x: 10, y: 20 },
    columns:12, // 设置一共多少份，默认12份
    breakpoints:{
      value:['320vp','600vp','840vp'],
      reference:BreakpointsReference.WindowSize
    }
}){
    ForEach(this.items, (item: MovieItem) => {
          GridCol({
              span: {
                sm: 6,  // sm尺寸下，一个GridCol占6份，一行2个元素
                md: 3,  // md尺寸下，一个GridCol占3份，一行4个元素
                lg: 2,  // lg尺寸下，一个GridCol占2份，一行6个元素
              }
        }){...}
    })
}

方式二

GridRow({
    gutter: { x: 10, y: 20 },
    columns:{
        sm:2,
        md:4,
        lg:6
    }, // 设置不同尺寸下所占的份数
    breakpoints:{
      value:['320vp','600vp','840vp'],
      reference:BreakpointsReference.WindowSize
    }
}){
    ForEach(this.items, (item: MovieItem) => {
          GridCol(){...}
    })
}

方式三

GridRow({
    columns:{
      xs:4,
      sm:4,
      md:8,
      lg:12
    }
}){
    ForEach(this.items, (item: MovieItem) => {
          GridCol({
              span:{
                xs:4,
                sm:4,
                md:6,
                lg:8
              },
              offset:{
                xs:0,
                sm:0,
                md:1,
                lg:2
              }  // 不同尺寸下，GridCol的偏移份数
        }){...}
    })
}

总结

在进行响应式开发时，我们需要根据实际的开发需求和技术复杂度开发项目。当涉及一块组件的改变时，用栅格布局；当涉及到某个组件的属性改变或js动态改变时，用断点系统；以组件的自适应布局进行布局思路开发

鸿蒙-栅格布局