HarmonyOS 栅格布局（GridRow）

栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的适配。

使用栅格布局的前提：
1.页面有等宽列数跟行数的元素。方便对页面元素进行定位和排版。
2.元素之间的间距调整，等距调整或x y轴不同的间距调整。
3.超出一行或一列，元素排列自动换行。

GridRow为栅格容器组件，需要与子组件GridCol配合使用

栅格系统断点

栅格系统以设备的水平宽度作为断点依据，分为xs、sm、md、lg四类设备宽度。

breakpoints.png

      GridRow({
        breakpoints: {
          value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
          reference: BreakpointsReference.WindowSize
        },
         columns: 6 // 默认12列，可以自定义为6列
      }) {
        ForEach(this.bgColors, (color:Color, index?:number|undefined) => {
          GridCol({
            span: {
              xs: 2, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
              sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
              md: 4, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
              lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
              xl: 8, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
            }
          }) {
            Row() {
              Text(`${index}`)
            }.width("100%").height('50vp')
          }.backgroundColor(color)
        })
      }

排列方向

通过设置GridRow的direction属性来指定子组件在栅格容器中的排列方向。GridRowDirection.Row从左往右排列，RowReverse从右往左排列

 GridRow({
        breakpoints: {
          value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
          reference: BreakpointsReference.WindowSize
        },
        columns: 6,
        direction: GridRowDirection.Row
      })

子组件间距

通过设置GridRow的gutter属性来控制子元素间的间距。

GridRow({
        breakpoints: {
          value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
          reference: BreakpointsReference.WindowSize
        },
        columns: 6,
        gutter: 10// 上下左右均间隔10
        gutter:{x: 5, y: 10}// 上下10 左右间隔5
      })