鸿蒙应用Grid网格布局如何实现不规则二维自适应宫格？

【学习目标】 掌握Grid/GridItem组件的核心架构、父子组件约束规则，理解二维网格布局的核心逻辑 吃透Grid组件六大核心配置：行列模板、排列方向、行列间距、滚动控制、不规则布局、性能优化的完整用法 掌握不规则网格的实现方案，搞定跨行跨列布局的核心配置与开发技巧 通过示例实现固定功能九宫格、计算器不规则布局、可滚动商品网格 一、本节工程目录 GridLayoutDemo/ ├── entry/ │ └── src/ │ └── main/ │ ├── ets/ │ │ ├── entryability/ │ │ │ └── EntryAbility.ets // 应用入口（工程自动生成） │ │ ├── pages/ │ │ │ ├── Index.ets // 导航首页：3个示例入口 │ │ │ ├── GridBaseDemo.ets // 示例1：基础九宫格布局 │ │ │ ├── GridIrregularDemo.ets // 示例2：不规则网格布局 │ │ │ └── GridGoodsDemo.ets // 示例3：可滚动商品网格实战 │ │ └── utils/ // 工具类目录 │ ├── resources/ // 应用资源目录 │ │ ├── base/element/ │ │ └── base/media/ │ └── module.json5 // 模块配置文件 └── build-profile.json5 // 工程配置文件 二、网格布局核心基础 2.1 什么是网格布局 网格布局是鸿蒙官方提供的二维自适应布局组件，以「Grid容器+GridItem子项」为核心架构： Grid 作为父容器，定义整体的行、列规则，将页面切分成若干个规整的单元格 GridItem 作为子容器，必须作为Grid的直接子组件使用，用于承载每个单元格的具体内容 它可以同时控制水平、垂直两个方向的布局规则，既能实现等分的规整宫格，也能实现跨行跨列的不规则布局，天然具备自适应能力。 核心规则：Grid的直接子组件只能是GridItem，GridItem必须嵌套在Grid容器内，两者单独使用均无布局效果。 2.2 网格布局核心适配逻辑 Grid容器通过行列规则，确定整体网格的单元格数量、尺寸占比 GridItem按规则依次填充单元格，可自定义跨行跨列的占用范围 容器尺寸发生变化时，所有单元格与间距会按占比等比例缩放，无需手动适配 仅设置行/列其中一项规则时，超出容器显示区域的内容，Grid自动支持对应方向的滚动 三、Grid容器配置详解 Grid是网格布局的核心，所有全局规则均在Grid容器上配置，下面我们逐一拆解每个核心配置的用法、规则。 3.1 核心构造函数语法 Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions) scroller：可选项，绑定滚动控制器，用于控制网格的滚动位置、翻页、回到顶部等操作 layoutOptions：可选项，用于配置不规则网格的跨行跨列规则 3.2 核心配置一：行列模板 通过rowsTemplate和columnsTemplate两个属性，定义网格的行列数量、每行每列的尺寸占比，是网格布局最核心的配置。