鸿蒙多端开发两把利剑：GridRow、GridCol

栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局， 问题 栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。

1. GridRow属性合集

1. columns，决定了row共分为几份
2. gutter，决定了上下左右的边距，可以设置 Length | GutterOption
3. direction，设置正反方向，一般默认
4. breakpoints，关键属性见下面

  // 启用xs、sm、md共3个断点
  breakpoints: {value: ["320vp", "600vp"]}
  // 启用xs、sm、md、lg共4个断点，断点范围值必须单调递增
  breakpoints: {value: ["320vp", "600vp", "840vp"]}
  // 启用xs、sm、md、lg、xl共5个断点，断点范围数量不可超过断点可取值数量-1
  breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]}

2. GridCol只有一个属性option：GridColOptions

span、offset、order

1. span，决定了子组件占用栅格容器的列数。span为0表示不参与布局计算，即不会被渲染。默认值1
2. offset，栅格子组件相对于原本位置偏移的列数。默认值：0
3. order，元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。默认值：0，当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。 当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。

3. onBreakpointChange妙用：该方法只能用在GridRow组件上，并根据相关设置自动监听屏幕尺寸变化

.onBreakpointChange((breakpoint) => {
  this.currentBp = breakpoint
}

完整代码如下

GridRow({
  columns: 6,
  gutter: { x: 25, y: 50 },
  breakpoints: { value: ["340vp", "600vp", "780vp"]},
}) {
  ForEach(this.bgColors, (color: Color,index:number) => {
    GridCol({ span: { xs: 1, sm: 6, md: 3, lg: 2 }, offset: 0, order: 0 }) {
      Row(){
        Text(index+'')
      }.width("100%").height("20vp")
    }.borderColor(color).borderWidth(2)
  })
}.width("100%").height("100%")
.onBreakpointChange((breakpoint) => {
  this.currentBp = breakpoint
})

1. sm屏幕，分6份，GridCol占6份，显示单列

2. md屏幕，分6份，GridCol占3份，显示2列

3. lg屏幕，分6份，GridCol占2份，显示3列