鴻蒙ArkUI開發(fā)：常用布局【創(chuàng)建網(wǎng)格（Grid/GridItem）】

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

1. 網(wǎng)格布局主要用于處理固定行列的UI，也支持動態(tài)調(diào)整。很類似iOS中的UICollectionView。
2. [Grid]容器的子組件一定是[GridItem]
3. 開發(fā)前請熟悉鴻蒙開發(fā)指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

Grid，GridItem關系

容器內(nèi)每一個條目對應一個GridItem組件

行列數(shù)量可配

1. Grid組件提供了rowsTemplate和columnsTemplate屬性用于設置網(wǎng)格布局行列數(shù)量與尺寸占比。
2. rowsTemplate和columnsTemplate屬性值是一個由多個空格和'數(shù)字+fr'間隔拼接的字符串，fr的個數(shù)即網(wǎng)格布局的行或列數(shù)，fr前面的數(shù)值大小，用于計算該行或列在網(wǎng)格布局寬度上的占比，最終決定該行或列的寬度

typescript
復制代碼
Grid() {
...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

單個網(wǎng)格可以橫跨多行或多列

通過設置GridItem的rowStart、rowEnd、columnStart和columnEnd可以實現(xiàn)單個網(wǎng)格橫跨多行或多列的場景

typescript
復制代碼
Grid() {
    GridItem() {}
    GridItem() {}
    GridItem() {}
    .columnStart(1)
    .columnEnd(2)

    GridItem() {}
    .rowStart(1)
    .rowEnd(2)
    GridItem() {}
    GridItem() {}
    GridItem() {}
    
    GridItem() {}
    .columnStart(1)
    .columnEnd(3)
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(8)
.rowsGap(8)

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

審核編輯 黃宇