介绍
Grid 是 ArkUI 框架中用于构建 二维网格（行列）布局 的核心容器组件，专门用来整齐、高效地排列大量相似内容（如图标、卡片、图片），是实现”宫格”、”画廊”、”商品列表”等界面的首选。
它通过 Grid（容器）+ GridItem（子项）组合工作，相比 List（线性列表）更擅长横向+纵向**的规整排布。
应用场景
- 首页功能入口（宫格菜单）
- 应用图标、设置项、工具按钮。
- 特点：固定列数、整齐划一、点击交互。
电商/商品列表
- 商品卡片、图片+标题+价格。
- 特点：多列、垂直滚动、懒加载海量数据。
相册/图片画廊
- 照片缩略图网格。
- 特点：等高等宽、无间距、沉浸式浏览。
横向滚动标签栏
- 分类标签、热门话题。
- 特点：只设置行模板，水平滚动。
不规则布局（日历/计算器）
- 日历：星期标题跨列、日期格子。
- 计算器：数字键+等号键跨行。
作用
- 二维布局（最核心）
- 同时控制行（Row）和列（Column），把屏幕切成整齐的”单元格矩阵”。
- 解决 List 只能垂直/水平线性排列的局限，实现真正的九宫格、多列宫格。
- 多端自适应（响应式）
- 支持按屏幕尺寸（断点）自动调整列数。
- 手机3列、平板4列、大屏5列，一套代码全设备适配。
- 自动滚动与性能优化
- 内容超出容器时自动支持垂直/水平滚动。
- 内置懒加载（LazyForEach），只渲染可见区域，海量数据不卡顿。
- 灵活的单元格控制
- 支持单元格跨行、跨列（合并单元格）。
- 精确控制行高、列宽、间距，布局高度可控。
属性
1. 结构定义（行列模板）
- columnsTemplate：定义列宽与列数（最常用）
'1fr 1fr 1fr'：固定3列，每列等宽。'repeat(4, 1fr)'：简化写法，4列等宽。'repeat(auto-fit, min(100vp, 100%))'：自适应列数，自动填满屏幕。
- rowsTemplate：定义行高与行数。
- 通常只设
columnsTemplate，行高由内容自适应，且自动垂直滚动。 - 只设
rowsTemplate，则自动水平滚动（横向宫格）。
- 通常只设
2. 间距控制
- columnsGap：列与列之间的空白（水平间距）。
- rowsGap：行与行之间的空白（垂直间距）。
3. 滚动与交互
- scrollBar：控制滚动条显示（
ScrollBar.Off/Auto/On）。 - onScrollIndex：监听滚动到第几个格子，常用于分页加载。
4. GridItem（子项）
- 必须是 Grid 的直接子组件。
- GridItem：单个格子，可放任何组件（文字、图片、卡片）。
- layoutOptions：设置跨行（rowSpan）、跨列（colSpan）。
与其他组件区别
- Grid（网格）
- 形态：二维（行列）。
- 适用：宫格、画廊、多列列表。
- 滚动：垂直/水平自动滚动。
- 适配：列数固定或自适应。
- 自动适配屏幕
- 自带滚动
- 自带懒加载（海量数据不卡）
- Column + Row
- 要自己手写行列
- 多设备适配要写大量逻辑
- 不能滚动！
- 数据多了巨卡！
- List（列表）
- 形态：一维（单行/单列）。
- 适用：消息流、设置项、长文本列表。
- 滚动：仅垂直/仅水平。
- 适配：简单拉伸。
- GridRow/GridCol（响应式栅格）
- 形态：12列栅格系统。
- 适用：整页布局、左右分栏、响应式区块。
- 滚动：不自带滚动。
- 适配：断点（xs/sm/md/lg）自动调整占比。
例子
@Entry
@Component
struct GridDemo {
build() {
// Grid容器：定义3列，行列间距10vp
Grid() {
// 循环生成9个格子
ForEach([1,2,3,4,5,6,7,8,9], (item) => {
GridItem() {
Text(`${item}`)
.fontSize(24)
.width('100%')
.height(80)
.backgroundColor('#f5f5f5')
.borderRadius(8)
.textAlign(TextAlign.Center)
}
})
}
.columnsTemplate('1fr 1fr 1fr') // 3列等宽
.columnsGap(10) // 列间距
.rowsGap(10) // 行间距
.width('100%')
.padding(10)
}
}
总结
鸿蒙6 Grid = 整齐排列+自适应+滚动+高性能
- 做宫格、多列列表、画廊 → 首选 Grid。
- 做长列表、信息流 → 用 List。
- 做整页响应式布局 → 用 GridRow/GridCol。