鸿蒙ArkUI开发：常用布局【创建网格（Grid/GridItem）】

创建网格（Grid/GridItem）

1. 网格布局主要用于处理固定行列的UI，也支持动态调整。很类似iOS中的UICollectionView。
2. [Grid]容器的子组件一定是[GridItem]
3. 开发前请熟悉鸿蒙开发指导文档：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

Grid，GridItem关系

容器内每一个条目对应一个GridItem组件

行列数量可配

1. Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。
2. rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列的宽度

typescript
复制代码
Grid() {
...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

单个网格可以横跨多行或多列

通过设置GridItem的rowStart、rowEnd、columnStart和columnEnd可以实现单个网格横跨多行或多列的场景

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直接拿`

审核编辑 黄宇