學習筆記（二十四）：ArkUi-網格 (Grid/GridItem)

听着music睡發表於2024-11-05
筆記UI

概述：

網格佈局是由“行”和“列”分割的單元格所組成，透過指定“專案”所在的單元格做出各種各樣的佈局。

網格佈局具有較強的頁面均分能力，子元件佔比控制能力，是一種重要自適應佈局，其使用場景有九宮格圖片展示、日曆、計算器等。

ArkUI提供了Grid容器元件和子元件GridItem，用於構建網格佈局。Grid用於設定網格佈局相關引數，GridItem定義子元件相關特徵。

Grid元件支援使用條件渲染、迴圈渲染、懶載入等方式生成子元件。

網格佈局是一種二維佈局。Grid元件支援自定義行列數和每行每列尺寸佔比、設定子元件橫跨幾行或者幾列，

同時提供了垂直和水平佈局能力。當網格容器元件尺寸發生變化時，

所有子元件以及間距會等比例調整，從而實現網格佈局的自適應能力。根據Grid的這些佈局能力，可以構建出不同樣式的網格佈局，如下圖所示。

如果Grid元件設定了寬高屬性，則其尺寸為設定值。如果沒有設定寬高屬性，Grid元件的尺寸預設適應其父元件的尺寸。

Grid元件根據行列數量與佔比屬性的設定，可以分為三種佈局情況：

  • 行、列數量與佔比同時設定：Grid只展示固定行列數的元素，其餘元素不展示，且Grid不可滾動。（推薦使用該種佈局方式）

  • 只設定行、列數量與佔比中的一個：元素按照設定的方向進行排布，超出的元素可透過滾動的方式展示。

  • 行列數量與佔比都不設定：元素在佈局方向上排布，其行列數由佈局方向、單個網格的寬高等多個屬性共同決定。超出行列容納範圍的元素不展示，且Grid不可滾動。

1、設定排列方式

rowsTemplate和columnsTemplate屬性值是一個由多個空格和'數字+fr'間隔拼接的字串，

fr的個數即網格佈局的行或列數，fr前面的數值大小，用於計算該行或列在網格佈局寬度上的佔比，最終決定該行或列寬度。

      Grid() {

      }
      .rowsTemplate('1fr 1fr') // 設定兩行
      .columnsTemplate('1fr 2fr 1fr') // 設定三列 佔比權重分別為1 2 1

2、設定主軸方向

若沒有設定行列數量與佔比，可以透過layoutDirection設定網格佈局的主軸方向，決定子元件的排列方式。

此時可以結合minCount和maxCount屬性來約束主軸方向上的網格數量。

Grid() {
  ...
}
.maxCount(3)  // 一行最多3個
.layoutDirection(GridDirection.Row) // 從左到右排列，超出換下一行

說明
  • layoutDirection屬性僅在不設定rowsTemplate和columnsTemplate時生效，此時元素在layoutDirection方向上排列。
  • 僅設定rowsTemplate時，Grid主軸為水平方向，交叉軸為垂直方向。
  • 僅設定columnsTemplate時，Grid主軸為垂直方向，交叉軸為水平方向。

3、設定行列間距

Grid() {
  ...
} 
.columnsGap(10) // 設定列間距10
.rowsGap(15) // 設定行間距15

4、構建可滾動的網格佈局

在設定Grid的行列數量與佔比時，如果僅設定行、列數量與佔比中的一個，

即僅設定rowsTemplate或僅設定columnsTemplate屬性，網格單元按照設定的方向排列，超出Grid顯示區域後，Grid擁有可滾動能力。 

Grid() {
        ForEach(this.gridItems,(item,index)=>{
          GridItem(){
            Text(item)
          }
          .height('30%')
          .width('30%')
          .margin(10)
          .backgroundColor(Color.Red)
        })
      }
      .rowsTemplate('1fr 1fr 1fr') // 設定兩行
      .rowsGap(10) // 設定行間距為10
      .columnsGap(20) // 設定列間距為20
      .layoutDirection(GridDirection.Row) // 設定從左到右排列，排滿一行再排下一行,只設定rowsTemplate屬性，當內容超出Grid區域時，可水平滾動。
      .height('50%')

相關文章