創(chuàng)建網格（Grid/GridItem）

概述

網格布局是由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局。網格布局具有較強的頁面均分能力，子組件占比控制能力，是一種重要自適應布局，其使用場景有九宮格圖片展示、日歷、計算器等。

ArkUI提供了Grid容器組件和子組件GridItem，用于構建網格布局。Grid用于設置網格布局相關參數(shù)，GridItem定義子組件相關特征。Grid組件支持使用條件渲染、循環(huán)渲染、懶加載等渲染控制方式生成子組件。

布局與約束

Grid組件為網格容器，其中容器內每一個條目對應一個GridItem組件，如下圖所示。

圖1 Grid與GridItem組件關系

網格布局是一種二維布局。Grid組件支持自定義行列數(shù)和每行每列尺寸占比、設置子組件橫跨幾行或者幾列，同時提供了垂直和水平布局能力。當網格容器組件尺寸發(fā)生變化時，所有子組件以及間距會等比例調整，從而實現(xiàn)網格布局的自適應能力。根據(jù)Grid的這些布局能力，可以構建出不同樣式的網格布局，如下圖所示。

圖2 網格布局

如果Grid組件設置了寬高屬性，則其尺寸為設置值。如果沒有設置寬高屬性，Grid組件的尺寸默認適應其父組件的尺寸。

Grid組件根據(jù)行列數(shù)量與占比屬性的設置，可以分為三種布局情況：

• 行、列數(shù)量與占比同時設置：Grid只展示固定行列數(shù)的元素，其余元素不展示，且Grid不可滾動。（推薦使用該種布局方式）
• 只設置行、列數(shù)量與占比中的一個：元素按照設置的方向進行排布，超出的元素可通過滾動的方式展示。
• 行列數(shù)量與占比都不設置：元素在布局方向上排布，其行列數(shù)由布局方向、單個網格的寬高等多個屬性共同決定。超出行列容納范圍的元素不展示，且Grid不可滾動。

設置排列方式

設置行列數(shù)量與占比

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

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

圖3 行列數(shù)量占比示例

如上圖所示，構建的是一個三行三列的的網格布局，其在垂直方向上分為三等份，每行占一份；在水平方向上分為四等份，第一列占一份，第二列占兩份，第三列占一份。

只要將rowsTemplate的值為'1fr 1fr 1fr'，同時將columnsTemplate的值為'1fr 2fr 1fr'，即可實現(xiàn)上述網格布局。

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

設置子組件所占行列數(shù)

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

圖4 不均勻網格布局

例如計算器的按鍵布局就是常見的不均勻網格布局場景。如下圖，計算器中的按鍵“0”和“=”，按鍵“0”橫跨第一、二兩列，按鍵“=”橫跨第五、六兩行。使用Grid構建的網格布局，其行列標號從1開始，依次編號。

圖5 計算器

在單個網格單元中，rowStart和rowEnd屬性表示指定當前元素起始行號和終點行號，columnStart和columnEnd屬性表示指定當前元素的起始列號和終點列號。

所以“0”按鍵橫跨第一列和第二列，只要將“0”對應GridItem的columnStart和columnEnd設為1和2，將“=”對應GridItem的的rowStart和rowEnd設為5和6即可。

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

“=”按鍵橫跨第五行和第六行，只要將將“=”對應GridItem的的rowStart和rowEnd設為5和6即可。

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

設置主軸方向

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

圖6 主軸方向示意圖

當前l(fā)ayoutDirection設置為Row時，先從左到右排列，排滿一行再排一下一行。當前l(fā)ayoutDirection設置為Column時，先從上到下排列，排滿一列再排一下一列，如上圖所示。此時，將maxCount屬性設為3，表示主軸方向上最大顯示的網格單元數(shù)量為3。

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

在網格布局中顯示數(shù)據(jù)

網格布局采用二維布局的方式組織其內部元素，如下圖所示。

圖7 通用辦公服務

Grid組件可以通過二維布局的方式顯示一組GridItem子組件。

Grid() {
  GridItem() {
    Text('會議')
      ...
  }

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

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

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

對于內容結構相似的多個GridItem，通常更推薦使用循環(huán)渲染ForEach語句中嵌套GridItem的形式，來減少重復代碼。

@Component
struct OfficeService {
  @State services: Array<string> = ['會議', '投票', '簽到', '打印']
  ...

  build() {
    Column() {
      Grid() {
        ForEach(this.services, service => {
          GridItem() {
            Text(service)
              ...
          }
        }, service => service)
      }
      .rowsTemplate('1fr 1fr')
      .columnsTemplate('1fr 1fr')
      ...
    }
    ...
  }
}

設置行列間距

在兩個網格單元之間的網格橫向間距稱為行間距，網格縱向間距稱為列間距，如下圖所示。

圖8 網格的行列間距

通過Grid的rowsGap和columnsGap可以設置網格布局的行列間距。在圖5所示的計算器中，行間距為15vp，列間距為10vp。

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

構建可滾動的網格布局

可滾動的網格布局常用在文件管理、購物或視頻列表等頁面中，如下圖所示。在設置Grid的行列數(shù)量與占比時，如果僅設置行、列數(shù)量與占比中的一個，即僅設置rowsTemplate或僅設置columnsTemplate屬性，網格單元按照設置的方向排列，超出Grid顯示區(qū)域后，Grid擁有可滾動能力。

圖9 橫向可滾動網格布局

如果設置的是columnsTemplate，Grid的滾動方向為垂直方向；如果設置的是rowsTemplate，Grid的滾動方向為水平方向。

如上圖所示的橫向可滾動網格布局，只要設置rowsTemplate屬性的值且不設置columnsTemplate屬性，當內容超出Grid組件寬度時，Grid可橫向滾動進行內容展示。

@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區(qū)域時，可水平滾動。
      .rowsGap(15)
      ...
    }
    ...
  }
}

控制滾動位置

與新聞列表的返回頂部場景類似，控制滾動位置功能在網格布局中也很常用，例如下圖所示日歷的翻頁功能。

圖10 日歷翻頁

Grid組件初始化時，可以綁定一個Scroller對象，用于進行滾動控制，例如通過Scroller對象的scrollPage方法進行翻頁。

private scroller: Scroller = new Scroller()

在日歷頁面中，用戶在點擊“下一頁”按鈕時，應用響應點擊事件，通過指定scrollPage方法的參數(shù)next為true，滾動到下一頁。

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
       })
     })
 }
}
...

性能優(yōu)化

與長列表的處理類似，循環(huán)渲染適用于數(shù)據(jù)量較小的布局場景，當構建具有大量網格項的可滾動網格布局時，推薦使用數(shù)據(jù)懶加載方式實現(xiàn)按需迭代加載數(shù)據(jù)，從而提升列表性能。

關于按需加載優(yōu)化的具體實現(xiàn)可參考數(shù)據(jù)懶加載章節(jié)中的示例。

當使用懶加載方式渲染網格時，為了更好的滾動體驗，減少滑動時出現(xiàn)白塊，Grid組件中也可通過cachedCount屬性設置GridItem的預加載數(shù)量，只在懶加載LazyForEach中生效。

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