Grid组件

Grid网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

子组件只能是GridItem

接口：

Grid(scroller?: Scroller)

参数：

属性：

除支持通用属性外，还支持以下属性：

Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式：

1. rowsTemplate、columnsTemplate同时设置：
   • Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。
   • 此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
   • Grid的宽高没有设置时，默认适应父组件尺寸。
   • Gird网格列大小按照Gird自身内容区域大小减去所有行列Gap后按各个行列所占比重分配。
   • GridItem默认填满网格大小。
2. rowsTemplate、columnsTemplate仅设置其中的一个：
   • 元素按照设置的方向进行排布，超出Grid显示区域后，Grid可通过滚动的方式展示。
   • 如果设置了columnsTemplate，Gird滚动方向为垂直方向，主轴方向为垂直方向，交叉轴方向为水平方向。
   • 如果设置了rowsTemplate，Gird滚动方向为水平方向，主轴方向为水平方向，交叉轴方向为垂直方向。
   • 此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
   • 网格交叉轴方向尺寸根据Gird自身内容区域交叉轴尺寸减去交叉轴方向所有Gap后按所占比重分配。
   • 网格主轴方向尺寸取当前网格交叉轴方向所有GridItem高度最大值。
3. rowsTemplate、columnsTemplate都不设置：
   • 元素在layoutDirection方向上排布，列数由Grid的宽度、首个元素的宽度、minCount、maxCount、columnsGap共同决定。
   • 行数由Grid高度、首个元素高度、cellLength、rowsGap共同决定。超出行列容纳范围的元素不显示，也不能通过滚动进行展示。
   • 此模式下仅生效以下属性：layoutDirection、maxCount、minCount、cellLength、editMode、columnsGap、rowsGap。
   • 当前layoutDirection设置为Row时，先从左到右排列，排满一行再排一下一列。剩余高度不足时不再布局，整体内容顶部居中。
   • 当前layoutDirection设置为Column时，先从上到下排列，排满一列再排一下一列，剩余宽度度不足时不再。整体内容顶部居中。

3X3布局

@Entry
@Component
struct APage {
  build() {
    Column() {
      Grid() {
        GridItem() {
          Text("1")
        }.backgroundColor("red")

        GridItem() {
          Text("2")
        }.backgroundColor("blue")

        GridItem() {
          Text("3")
        }.backgroundColor("green")

        GridItem() {
          Text("4")
        }.backgroundColor("red")

        GridItem() {
          Text("5")
        }.backgroundColor("blue")

        GridItem() {
          Text("6")
        }.backgroundColor("green")

        GridItem() {
          Text("7")
        }.backgroundColor("red")

        GridItem() {
          Text("8")
        }.backgroundColor("blue")

        GridItem() {
          Text("9")
        }.backgroundColor("green")
      }
      .width("100%")
      .height(300)
      .columnsTemplate("1fr 1fr 1fr")
      .rowsTemplate("1fr 1fr 1fr")
      .columnsGap(5)
      .rowsGap(5)

    }
    .width("100%")
    .height("100%")
  }
}

合并网格

合并第一行第一列

修改"1"网格项属性 .rowStart(1).rowEnd(2)

注释"4"网格项

@Entry
@Component
struct APage {
  build() {
    Column() {
      Grid() {
        GridItem() {
          Text("1")
        }.backgroundColor("red")
        .rowStart(1).rowEnd(2)

        GridItem() {
          Text("2")
        }.backgroundColor("blue")

        GridItem() {
          Text("3")
        }.backgroundColor("green")

        // GridItem() {
        //   Text("4")
        // }.backgroundColor("red")

        GridItem() {
          Text("5")
        }.backgroundColor("blue")

        GridItem() {
          Text("6")
        }.backgroundColor("green")

        GridItem() {
          Text("7")
        }.backgroundColor("red")

        GridItem() {
          Text("8")
        }.backgroundColor("blue")

        GridItem() {
          Text("9")
        }.backgroundColor("green")
      }
      .width("100%")
      .height(300)
      .columnsTemplate("1fr 1fr 1fr")
      .rowsTemplate("1fr 1fr 1fr")
      .columnsGap(5)
      .rowsGap(5)

    }
    .width("100%")
    .height("100%")
  }
}

网格超出滚动

2行超出的网格项横向滚动

@Entry
@Component
struct APage {
  build() {
    Column() {
      Grid() {
        GridItem() {
          Text("1")
        }.width("30%").backgroundColor("red")

        GridItem() {
          Text("2")
        }.width("30%").backgroundColor("blue")

        GridItem() {
          Text("3")
        }.width("30%").backgroundColor("green")

        GridItem() {
          Text("4")
        }.width("30%").backgroundColor(Color.Pink)

        GridItem() {
          Text("5")
        }.width("30%").backgroundColor(Color.Orange)

        GridItem() {
          Text("6")
        }.width("30%").backgroundColor("red")

        GridItem() {
          Text("7")
        }.width("30%").backgroundColor("blue")

        GridItem() {
          Text("8")
        }.width("30%").backgroundColor("green")

        GridItem() {
          Text("9")
        }.width("30%").backgroundColor(Color.Pink)

        GridItem() {
          Text("10")
        }.width("30%").backgroundColor(Color.Orange)
      }
      .width("100%")
      .height(300)
      .rowsTemplate("1fr 1fr")
      .columnsGap(5)
      .rowsGap(5)

    }
    .width("100%")
    .height("100%")
  }
}