一、概述
- 网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。
- ArkUI提供了Grid 容器组件和子组件 GridItem，用于构建网格布局。Grid 用于设置网格布局相关参数，GridItem 定义子组件相关特征。Grid 组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。
- Grid 组件为网格容器，其中容器内各条目对应一个 GridItem 组件。Grid 的子组件必须是 GridItem 组件。
![]()
二、网格布局
![]()
- 网格布局是一种二维布局。Grid 组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力。
- 如果 Grid 组件设置了宽高属性，则其尺寸为设置值。如果没有设置宽高属性，Grid 组件的尺寸默认适应其父组件的尺寸。
- 当网格容器组件尺寸发生变化时，所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。
- Grid组件根据行列数量与占比属性的设置，可以分为三种布局情况：
- 行、列数量与占比同时设置：Grid 只展示固定行列数的元素，其余元素不展示，且 Grid 不可滚动。（推荐使用该种布局方式）
- 只设置行、列数量与占比中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。
- 行列数量与占比都不设置：元素在布局方向上排布，其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示，且 Grid 不可滚动。
三、网格数据
![]()
- 网格布局采用二维布局的方式组织其内部元素。Grid 组件可以通过二维布局的方式显示一组GridItem子 组件。
- 对于内容结构相似的多个GridItem，通常更推荐使用 ForEach 语句中嵌套GridItem的形式，来减少重复代码。
// 二维布局方式Grid(){GridItem(){Text('会议')// ···}GridItem(){Text('投票')// ···}GridItem(){Text('签到')// ···}GridItem(){Text('打印')// ···}}// ···.rowsTemplate('1fr 1fr').columnsTemplate('1fr 1fr')// ForEach语句方式content:Array<striing>=['会议','投票','签到','打印']Grid(){ForEach(this.content,(item:string)=>{GridItem(){Text(item)}// ···},(item:string):string=>item)}.rowsTemplate(('1fr 1fr')asstring).columnsTemplate(('1fr 1fr'<
