鴻蒙HarmonyOS實戰-ArkUI元件（Grid/GridItem）

蜀道山QAQ發表於2024-03-29
鴻蒙UI元件

🚀一、Grid/GridItem

🔎1.概述

網格佈局是一種新型的佈局方式，它按照網格來劃分頁面，透過列和行來定義網格，使得頁面的佈局更加靈活、簡潔、易於維護。網格佈局能夠將頁面分成多個單元格，可以在這些單元格中佈置各種元素，例如文字、圖片、媒體等，從而實現頁面的排版。網格佈局支援自適應佈局，能夠輕鬆地實現響應式設計，支援多終端裝置的顯示。

ArkUI提供了Grid容器元件和子元件GridItem，用於構建網格佈局。Grid用於設定網格佈局相關引數，GridItem定義子元件相關特徵。Grid元件支援使用條件渲染、迴圈渲染、懶載入等渲染控制方式生成子元件。

🔎2.佈局與約束

1、Grid與GridItem元件關係
image

Grid的子元件必須是GridItem元件

2、網格佈局
image

Grid元件支援自定義行列數和每行每列尺寸佔比、設定子元件橫跨幾行或者幾列，同時提供了垂直和水平佈局能力

🔎3.設定排列方式

🦋3.1 設定行列數量與佔比

透過設定行列數量與尺寸佔比，可以確定網格佈局的整體排列方式。Grid元件提供了rowsTemplate和columnsTemplate屬性，用於設定網格佈局的行列數量與尺寸佔比。 rowsTemplate和columnsTemplate屬性值是一個由多個空格和’數字+fr’間隔拼接的字串，其中fr的個數即為網格佈局的行或列數。數字表示該行或列在網格佈局寬度上的佔比，最終決定該行或列的寬度。

Grid() {
  ...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

image

🦋3.2 設定子元件所佔行列數

1、0的設定

GridItem() {
  Text(key)
    ...
}
.columnStart(1)
.columnEnd(2)

image

2、=號的設定

GridItem() {
  Text(key)
    ...
}
.rowStart(5)
.rowEnd(6)

image

🦋3.3 設定主軸方向

Grid() {
  ...
}
.maxCount(3)
.layoutDirection(GridDirection.Row)

image

🔎4.案例

🦋4.1 在網格佈局中顯示資料

@Entry
@Component
struct Index {
  build() {
    Grid() {
      GridItem() {
        Text('會議')
      }

      GridItem() {
        Text('簽到')
      }

      GridItem() {
        Text('投票')
      }

      GridItem() {
        Text('列印')
      }
    }
    .rowsTemplate('1fr 1fr')
    .columnsTemplate('1fr 1fr')
  }
}

image

🦋4.2 設定行列間距

Grid() {
  ...
}
.columnsGap(10)
.rowsGap(15)

image

🦋4.3 構建可滾動的網格佈局（官方）

@Component
struct Shopping {
  @State services: Array<string> = ['直播', '進口', ...]
  ...

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.services, (service: string, index) => {
          GridItem() {
            ...
          }
          .width('25%')
        }, service => service)
      }
      .rowsTemplate('1fr 1fr') // 只設定rowsTemplate屬性，當內容超出Grid區域時，可水平滾動。
      .rowsGap(15)
      ...
    }
    ...
  }
}

image

滑動後
image

🦋4.4 在網格佈局中顯示資料（官方）

private scroller: Scroller = new Scroller()
Column({ space: 5 }) {
  Grid(this.scroller) {
    ...
  }
  .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
  ...
 
 Row({space: 20}) {
   Button('上一頁')
     .onClick(() => {
       this.scroller.scrollPage({
         next: false
       })
     })

   Button('下一頁')
     .onClick(() => {
       this.scroller.scrollPage({
         next: true
       })
     })
 }
}
...

image

🦋4.5 長網格處理

和長列表類似就不做多說了

Grid() {
  LazyForEach(this.dataSource, item => {
    GridItem() {
      ...
    }
  })
}
.cachedCount(3)

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章