一、設(shè)置排列方式

• 設(shè)置行列數(shù)量與占比
  通過設(shè)置行列數(shù)量與尺寸占比可以確定網(wǎng)格布局的整體排列方式。Grid組件提供了rowsTemplate和columnsTemplate屬性用于設(shè)置網(wǎng)格布局行列數(shù)量與尺寸占比。

rowsTemplate和columnsTemplate屬性值是一個(gè)由多個(gè)空格和'數(shù)字+fr'間隔拼接的字符串，fr的個(gè)數(shù)即網(wǎng)格布局的行或列數(shù)，fr前面的數(shù)值大小，用于計(jì)算該行或列在網(wǎng)格布局寬度上的占比，最終決定該行或列的寬度

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Grid() {
      GridItem() {
        Text("1")
      }.backgroundColor(Color.Black)

      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)

      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)

      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)

      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)

      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)

      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)

      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)

      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 1fr')
  }
}

微信圖片_20231226093638.png

• 設(shè)置子組件所占行列數(shù)
  除了大小相同的等比例網(wǎng)格布局，由不同大小的網(wǎng)格組成不均勻分布的網(wǎng)格布局場景在實(shí)際應(yīng)用中十分常見，如下圖所示。在Grid組件中，通過設(shè)置GridItem的rowStart、rowEnd、columnStart和columnEnd可以實(shí)現(xiàn)如圖所示的單個(gè)網(wǎng)格橫跨多行或多列的場景。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Grid() {
      GridItem() {
        Text("1")
      }
      .backgroundColor(Color.Black)
      .columnStart(1)
      .columnEnd(3)

      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)

      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)

      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)


      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)

      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)

      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)

      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)

      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 1fr')
  }
}

微信圖片_20231226101616.png

• 設(shè)置主軸方向
  使用Grid構(gòu)建網(wǎng)格布局時(shí)，若沒有設(shè)置行列數(shù)量與占比，可以通過layoutDirection可以設(shè)置網(wǎng)格布局的主軸方向，決定子組件的排列方式。此時(shí)可以結(jié)合minCount和maxCount屬性來約束主軸方向上的網(wǎng)格數(shù)量

1. layoutDirection屬性僅在不設(shè)置rowsTemplate和columnsTemplate時(shí)生效，此時(shí)元素在layoutDirection方向上排列。

2. 僅設(shè)置rowsTemplate時(shí)，Grid主軸為水平方向，交叉軸為垂直方向。

3. 僅設(shè)置columnsTemplate時(shí)，Grid主軸為垂直方向，交叉軸為水平方向。

• 設(shè)置行列間距
  通過Grid的rowsGap和columnsGap可以設(shè)置網(wǎng)格布局的行列間距。在圖5所示的計(jì)算器中，行間距為15vp，列間距為10vp。