鸿蒙Next-一次开发多端部署-基于栅格布局Grid

栅格组件的本质是：将组件划分为有规律的多列，通过调整【不同断点】下的【栅格组件的列数】，及【子组件所占列数】实现不同布局

核心用法：

// 行
GridRow(属性){
  // 列
  GridCol(属性){
    
  }
}

使同一组件在不同的宽度下，例如手机，平板，电脑占不同的份数（可以理解为不同的像素点），使其布局排版更加合理和美观

完整示例代码如下：

@Entry
@Component
struct Demo12 {
  @State currentBreakPoint: string = ''

  build() {
    Column() {
      // GridRow 默认支持 4 个断点
      //  xs:(0vp<=width<320vp) 智能穿戴，比如手表
      //  sm:(320vp<=width<600vp) 手机
      //  md:(600vp<=width<840vp) 折叠屏
      //  lg:(840vp<=width) 平板
      GridRow({
        breakpoints: {
          value: ['320vp', '600vp', '840vp']
        },
        gutter: 10, // 子项之间的间距
        // columns: 12, // 设置一行的总列数, 默认: 一行12列
        // 可以根据断点值, 设置每一行的列数
        columns: {
          xs: 2, // 超小屏, 比如: 手表
          sm: 4, // 小屏幕, 比如: 手机竖屏
          md: 8, // 中等屏幕, 比如: 折叠屏, 手机横屏
          lg: 12, // 大屏幕, 比如: pad
        }
      }) {
        ForEach(Array.from({ length: 2 }), (item: string, index: number) => {
          GridCol({
            // 设置一列占得份数
            // span: 2,
            // 支持不同断点分别设置不同的占用列数
            span: {
              xs: 1,
              sm: 1,
              md: 1,
              lg: 1
            },
            // offset 偏移列数 默认为 0
            // offset: 1, // 偏移一列
            // 支持不同断点分别设置偏移不同的列数
            offset: {
              sm: 1
            }
          }) {
            Text(index.toString())
          }
          .height(100)
          .border({ width: 1, color: Color.Black })
        })
      }
      .width('90%')
      .height('90%')
      .border({ width: 1, color: Color.Orange })
      // 断点发生变化时触发回调
      .onBreakpointChange((breakPoint) => {
        console.log('breakPoint', breakPoint)
        this.currentBreakPoint = breakPoint
      })

      Text(`断点值: ${this.currentBreakPoint}`)
        .fontSize(30)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#dcdfe8')
  }
}