鸿蒙栅格布局使用

介绍

栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：

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

页面编写

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