鸿蒙之grid详解

前言：

Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。

固定行列

1. 子组件必须是GridItem组件，需要展示的内容设置在 GridItem 内部既可
2. GridItem 只能有一个子组件

  GridItem(){
    // 展示的内容放在这里
  }
  GridItem(){
    // 展示的内容放在这里
  }
}

@Entry
@Component
struct Index {
  build() {
    Column(){
      Grid(){
        GridItem(){
          Text('1')
        }
        .width(20)
        .backgroundColor(Color.Pink)
        .margin(10)
        GridItem(){
          Text('1')
        }
        .width(20)
        .backgroundColor(Color.Pink)
        .margin(10)
        GridItem(){
          Text('1')
        }
        .width(20)
        .backgroundColor(Color.Pink)
        .margin(10)
      }
    }
  }
}

基本属性:

名称	参数类型	描述
columnsTemplate	string	设置当前网格布局列的数量或最小列宽值，不设置时默认1列。例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
rowsTemplate	string	设置当前网格布局行的数量或最小行高值，不设置时默认1行。例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
columnsGap	Length	设置列与列的间距。默认值：0
rowsGap	Length	设置行与行的间距。默认值：0

@Entry
@Component
struct Page08_Grid {
  build() {
    Column() {
      
      Grid() {
        GridItem() {
          Text('1')
            .fontColor(Color.White)
            .fontSize(30)
        }
        .backgroundColor(Color.Blue)

        GridItem() {
          Text('2')
            .fontColor(Color.White)
            .fontSize(30)
        }
        .backgroundColor(Color.Blue)

        GridItem() {
          Text('3')
            .fontColor(Color.White)
            .fontSize(30)
        }
        .backgroundColor(Color.Blue)

        GridItem() {
          Text('4')
            .fontColor(Color.White)
            .fontSize(30)
        }
        .backgroundColor(Color.Blue)

        GridItem() {
          Text('5')
            .fontColor(Color.White)
            .fontSize(30)
        }
        .backgroundColor(Color.Blue)

        GridItem() {
          Text('6')
            .fontColor(Color.White)
            .fontSize(30)
        }
        .backgroundColor(Color.Blue)
      }
      .border({ width: 1 })
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('100%')
      .height(360)
      .columnsGap(10)
      .rowsGap(10)
    }
    .width('100%')
    .height('100%')
  }
}