前言Grid是 ArkUI 的网格布局容器适用于日历、照片墙、商品列表等需要规则排列的场景。理解columnsTemplate和rowsTemplate的 fr 单位分配规则以及 GridItem 的跨列跨行配置是灵活使用 Grid 的关键。本文以小事记xiaoshiji_ohos_app 的CalendarViewPage.ets和EventDetailPage.ets为分析对象深入解析 Grid 布局的完整用法。本文参考 HarmonyOS 官方文档Grid 组件 和 GridItem 参考。一、Grid 的基本用法1.1 基本结构// Grid 容器的基本结构 Grid() { ForEach(this.items, (item) { GridItem() { Text(item) } }) } .columnsTemplate(1fr 1fr 1fr) // 三列等宽 .rowsTemplate(1fr 1fr) // 两行等高 .rowsGap(8) // 行间距 .columnsGap(8) // 列间距 .width(100%)方案适用场景注意事项方案一简单场景实现简单易于维护方案二复杂场景灵活性高需注意性能方案三特殊场景针对特定需求优化1.2 fr 单位的分配规则fr是 Grid 布局中的弹性单位表示剩余空间的分配比例// fr 单位的分配 // 三列宽度比例为 1:2:1 .columnsTemplate(1fr 2fr 1fr) // 四列宽度比例为 1:1:1:1 .columnsTemplate(1fr 1fr 1fr 1fr) // 混合固定宽度和弹性宽度 .columnsTemplate(100vp 1fr 1fr) // 第一列固定 100vp剩余两列弹性分配二、日历网格的实现2.1 日历网格分析// CalendarViewPage.ets — 日历网格实现 Entry Component export struct CalendarViewPage { private calendarDays: number[] [0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 0, 0]; private eventDays: number[] [1, 12, 20]; State selectedDay: number 20; build() { Column() { // 星期标题 Row() { ForEach([日, 一, 二, 三, 四, 五, 六], (day: string) { Text(day) .fontSize(13) .fontColor(#9CA3AF) .width(14.28%) .textAlign(TextAlign.Center) }) } .width(100%) // 日期网格 Grid() { ForEach(this.calendarDays, (day: number, index: number) { GridItem() { if (day 0) { Column() { Text(day.toString()) .fontSize(15) .fontColor(this.selectedDay day ? Color.White : #1A1A2E) if (this.eventDays.includes(day)) { Circle().width(4).height(4).fill(#7B68EE).margin({ top: 2 }) } } .width(40) .height(40) .backgroundColor(this.selectedDay day ? #7B68EE : Color.Transparent) .borderRadius(20) .onClick(() { this.selectedDay day; }) } } }, (day: number, index: number) ${index}) } .columnsTemplate(1fr 1fr 1fr 1fr 1fr 1fr 1fr) // 7列代表一周7天 .rowsGap(4) .width(100%) .padding({ left: 8, right: 8 }) } } }三、GridItem 跨列跨行3.1 跨列配置// GridItem 跨列 Grid() { // 普通 GridItem GridItem() { Text(A) } // 跨2列的 GridItem GridItem() { Text(B (跨2列)) } .columnStart(0) .columnEnd(1) // 从第0列到第1列占据2列 // 跨3列的 GridItem GridItem() { Text(C (跨3列)) } .columnStart(0) .columnEnd(2) // 从第0列到第2列占据3列 } .columnsTemplate(1fr 1fr 1fr)四、照片网格的实现4.1 照片网格// EventDetailPage.ets — 照片网格 Grid() { ForEach(this.photos, (photo: string) { GridItem() { Column() .width(100%) .height(100) .backgroundColor(#F0EEFF) .borderRadius(8) } }, (photo: string) photo) } .columnsTemplate(1fr 1fr 1fr) // 三列等宽 .rowsGap(8) .columnsGap(8) .width(100%)五、常见问题5.1 GridItem 高度不一致问题GridItem 内容高度不同导致布局错乱。解决方案设置固定高度或使用height属性。GridItem() { Column() { Text(内容) } .height(100) // 固定高度 }5.2 网格滚动性能问题大量 GridItem 时滚动卡顿。解决方案使用LazyForEach实现懒加载。Grid() { LazyForEach(this.dataSource, (item) { GridItem() { Text(item.name) } }) }六、Grid 与 List 的选择对比维度GridList布局方向二维行列一维行或列跨列跨行支持不支持复用机制支持支持适用场景网格类布局列表类布局十、最佳实践与优化建议在实际开发中合理运用上述技术可以显著提升应用的性能和用户体验。以下是几个关键的最佳实践建议10.1 性能优化要点优化方向具体措施预期效果渲染性能减少不必要的组件重建提升帧率内存管理及时释放不再使用的资源降低内存占用响应速度避免在主线程执行耗时操作提升交互流畅度10.2 推荐实践步骤按照以下步骤进行优化使用 DevEco Studio 的 Profiler 工具分析当前性能瓶颈针对识别出的热点进行针对性优化通过单元测试和集成测试验证优化效果在真机环境下进行回归测试10.3 代码示例// 推荐的最佳实践示例 Component export struct OptimizedComponent { // 使用 State 管理最小粒度的状态 State private isActive: boolean false; build() { Column() { Text(this.isActive ? 激活 : 未激活) .fontSize(16) } .onClick(() { // 使用 animateTo 实现平滑过渡 animateTo({ duration: 300 }, () { this.isActive !this.isActive; }); }); } }最佳实践提示在编写代码时始终遵循 ArkUI 的性能优化原则避免在 build() 方法中执行复杂计算或频繁的状态更新。十、进一步学习与拓展掌握以上内容后可以进一步探索以下相关主题深化对 HarmonyOS 开发的理解10.1 推荐学习路径学习阶段主题预期目标基础阶段掌握核心概念和 API 用法能够独立完成基本功能开发进阶阶段理解底层原理和最佳实践能够优化应用性能和用户体验高级阶段掌握架构设计和性能调优能够主导复杂项目的技术方案10.2 实践项目建议建议通过以下实践项目巩固所学知识基于小事记项目尝试独立实现一个类似的功能模块阅读 HarmonyOS 官方 Sample 代码学习最佳实践参与开源社区贡献代码或文档10.3 相关资源HarmonyOS 官方文档提供完整的 API 参考和开发指南DevEco Studio 文档包含 IDE 使用技巧和调试方法开源社区获取项目源码和开发经验学习建议理论与实践相结合在阅读文档的同时动手编写代码才能更好地掌握 HarmonyOS 应用开发技能。10.4 拓展阅读以下资源可以加深对本文内容的理解HarmonyOS 官方开发者文档提供了最权威的 API 参考和最佳实践指南开源社区的项目源码是学习实际应用开发的宝贵资源DevEco Studio 的代码示例模板可以帮助快速上手资源类型推荐指数适用人群官方文档⭐⭐⭐⭐⭐所有开发者开源项目⭐⭐⭐⭐中级开发者技术博客⭐⭐⭐入门开发者学习路径建议按照“官方文档 → 开源项目 → 实践项目“的路径循序渐进地学习。十、完整示例自定义组件封装将常用的 UI 模式封装为可复用的自定义组件是提升开发效率的关键。10.1 组件封装// CustomCard.ets — 自定义卡片组件 Component export struct CustomCard { Prop title: string ; Prop description: string ; State isExpanded: boolean false; build() { Column() { Row() { Text(this.title) .fontSize(16) .fontWeight(FontWeight.Bold) Blank() Text(this.isExpanded ? 收起 : 展开) .fontSize(12) .fontColor(#7B68EE) } .width(100%) .onClick(() { this.isExpanded !this.isExpanded; }) if (this.isExpanded) { Text(this.description) .fontSize(14) .fontColor(#6B7280) .margin({ top: 8 }) .lineHeight(22) } } .padding(16) .backgroundColor(Color.White) .borderRadius(12) .shadow({ radius: 4, color: #00000010, offsetX: 0, offsetY: 2 }) } }10.2 调用方式// 使用自定义卡片组件 CustomCard({ title: 重要事件, description: 这是对事件的详细描述内容可以包含多行文本信息 })10.3 组件属性说明属性名类型默认值说明titlestring‘’卡片标题descriptionstring‘’详情描述文本isExpandedbooleanfalse展开状态设计原则自定义组件应保持单一的职责通过 Prop 和 Link 实现与父组件的状态同步。总结本文深入解析了 Grid 网格布局的完整用法。核心要点如下fr 单位弹性分配剩余空间支持混合固定宽度和弹性宽度日历网格7列等宽布局配合条件渲染实现日期标记GridItem 跨列通过columnStart/columnEnd实现跨列效果照片网格三列等宽布局适合展示图片性能优化使用LazyForEach实现懒加载如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力九、完整示例代码9.1 完整组件实现以下是一个完整的组件实现示例展示了本文介绍的各个技术点的综合运用import { Component, State, Prop } from kit.ArkUI; Component export struct DemoComponent { Prop title: string ; State count: number 0; build() { Column({ space: 12 }) { // 标题区域 Text(this.title) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#1A1A2E) .width(100%) // 内容区域 Text(当前计数: ${this.count}) .fontSize(14) .fontColor(#6B7280) // 交互按钮 Button(点击增加) .width(120) .height(40) .backgroundColor(#7B68EE) .borderRadius(20) .fontColor(Color.White) .onClick(() { this.count; }) } .width(100%) .padding(16) .backgroundColor(Color.White) .borderRadius(12) .shadow({ radius: 4, color: #00000008, offsetX: 0, offsetY: 2 }) } }9.2 使用方式在页面中引入并使用该组件Entry Component struct Index { build() { Column() { DemoComponent({ title: 示例组件 }) } .width(100%) .height(100%) .backgroundColor(#F8F9FA) } }9.3 代码说明组件封装使用Component装饰器定义可复用的组件状态管理使用State管理组件内部状态参数传递使用Prop接收外部传入的参数事件处理使用onClick处理用户交互样式优化使用borderRadius、shadow等属性美化 UI相关资源官方文档 - 开发者指南HarmonyOS 应用开发官方文档 - ArkUI 组件参考ArkUI 组件官方文档 - API 参考API 参考官方文档 - 状态管理状态管理概述官方文档 - 动画动画概述官方文档 - 网络管理网络管理官方文档 - 数据管理数据管理开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net