HarmonyOS NEXT鸿蒙开发：Grid布局（GridItem）-马育民老师

# 介绍

[官方API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-griditem-V5 "官方API")

Grid 是 ArkUI 框架中用于构建 **二维网格（行列）布局** 的核心容器组件，专门用来整齐、高效地排列大量相似内容（如图标、卡片、图片），是实现"宫格"、"画廊"、"商品列表"等界面的首选。**
它通过 `Grid`（容器）+ `GridItem`（子项）组合工作，相比 List（线性列表）更擅长**横向+纵向**的规整排布。

### 应用场景

1. **首页功能入口（宫格菜单）**
    - 应用图标、设置项、工具按钮。
    - 特点：固定列数、整齐划一、点击交互。

2. **电商/商品列表**
    - 商品卡片、图片+标题+价格。
    - 特点：多列、垂直滚动、懒加载海量数据。

3. **相册/图片画廊**
    - 照片缩略图网格。
    - 特点：等高等宽、无间距、沉浸式浏览。

4. **横向滚动标签栏**
    - 分类标签、热门话题。
    - 特点：只设置行模板，**水平滚动**。

5. **不规则布局（日历/计算器）**
    - 日历：星期标题跨列、日期格子。
    - 计算器：数字键+等号键跨行。

# 作用

1. **二维布局（最核心）**
    - 同时控制**行（Row）**和**列（Column）**，把屏幕切成整齐的"单元格矩阵"。
    - 解决 List 只能垂直/水平线性排列的局限，实现真正的**九宫格、多列宫格**。
2. **多端自适应（响应式）**
    - 支持按**屏幕尺寸（断点）**自动调整列数。
    - 手机3列、平板4列、大屏5列，一套代码全设备适配。
3. **自动滚动与性能优化**
    - 内容超出容器时**自动支持垂直/水平滚动**。
    - 内置**懒加载（LazyForEach）**，只渲染可见区域，海量数据不卡顿。
4. **灵活的单元格控制**
    - 支持**单元格跨行、跨列**（合并单元格）。
    - 精确控制**行高、列宽、间距**，布局高度可控。

# 属性

### 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）自动调整占比。

# 例子
```typescript
@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**。

原文出处：http://malaoshi.top/show_1GW34VR2bHrs.html