HarmonyOS开发实战：小分享-六宫格分类导航——百分比宽度与点击跳转

前言分类导航网格是移动应用首页的核心功能入口通常以网格形式展示多个功能分类点击后跳转到对应页面。本篇以小分享 App 的 HomePage 六宫格分类导航为例讲解width(16.66%)等分宽度、ForEach循环渲染、onClick路由跳转等核心技巧。详细 API 可参考 HarmonyOS ArkUI 组件官方文档。一、六宫格分类导航完整代码1.1 数据定义private categories: ArrayCategoryItem [ { icon: , label: 文字, color: #5B8DEF, bg: #EEF4FF, page: pages/TextEditPage }, { icon: ️, label: 图片, color: #4CAF50, bg: #E8F5E9, page: pages/ImageEditPage }, { icon: , label: 链接, color: #2196F3, bg: #E3F2FD, page: pages/LinkEditPage }, { icon: , label: 笔记, color: #9C27B0, bg: #F3E5F5, page: pages/TextEditPage }, { icon: , label: 模板, color: #FF9800, bg: #FFF3E0, page: pages/TemplateSelectPage }, { icon: ⭐, label: 收藏, color: #F44336, bg: #FFEBEE, page: pages/FavoritesPage } ];1.2 渲染代码Row({ space: 0 }) { ForEach(this.categories, (item: CategoryItem, index: number) { Column({ space: 6 }) { // 图标徽章 Column() { Text(item.icon) .fontSize(24) } .width(48) .height(48) .backgroundColor(item.bg) .borderRadius(12) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) // 分类名称 Text(item.label) .fontSize(12) .fontColor(#333333) } .width(16.66%) .alignItems(HorizontalAlign.Center) .onClick(() { router.pushUrl({ url: item.page }) }) }, (item: CategoryItem, index: number) ${item.label}) } .width(100%) .padding({ left: 16, right: 16 })二、CategoryItem 接口定义2.1 接口结构export interface CategoryItem { icon: string; // 图标 Emoji label: string; // 分类名称 color: string; // 主题色 bg: string; // 背景色 page: string; // 目标页面路径 }2.2 字段说明字段类型作用示例iconstring图标 Emoji️labelstring分类名称图片colorstring主题色#4CAF50bgstring背景色#E8F5E9pagestring目标页面路径pages/ImageEditPage三、十六点六六百分比宽度3.1 等分原理width(16.66%)约等于 100% / 6实现六等分100% / 6 16.666...%3.2 常见等分数列数百分比2 列50%3 列33.33%4 列25%5 列20%6 列16.66%3.3 百分比宽度的优势百分比宽度的优势如下自适应屏幕不同屏幕宽度下自动适配无需计算指定百分比即可响应式横竖屏切换时自动调整四、图标徽章设计4.1 完整代码Column() { Text(item.icon) .fontSize(24) } .width(48) .height(48) .backgroundColor(item.bg) .borderRadius(12) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)4.2 设计要点设计要点如下尺寸48 × 48vp适合手指触控背景色每个分类不同bg字段增强视觉区分度圆角12vp柔和美观居中justifyContent CenteralignItems Center五、颜色主题5.1 六种颜色搭配分类背景色主题色色系文字#EEF4FF#5B8DEF蓝色图片#E8F5E9#4CAF50绿色链接#E3F2FD#2196F3天蓝笔记#F3E5F5#9C27B0紫色模板#FFF3E0#FF9800橙色收藏#FFEBEE#F44336红色5.2 颜色设计原则颜色设计原则如下背景色bg使用浅色仅作底衬主题色color使用饱和色用于强调文本色#333333深灰保证可读性色系区分6 种不同的色系便于快速识别六、点击跳转6.1 onClick 路由跳转.onClick(() { router.pushUrl({ url: item.page }) })6.2 跳转目标分类目标页面页面说明文字pages/TextEditPage文字编辑器图片pages/ImageEditPage图片编辑器链接pages/LinkEditPage链接分享编辑笔记pages/TextEditPage复用文字编辑器模板pages/TemplateSelectPage模板选择收藏pages/FavoritesPage收藏列表6.3 pushUrl vs replaceUrl分类导航使用pushUrl让用户可以通过返回按钮回到首页// 分类导航用 pushUrl保留返回入口 router.pushUrl({ url: item.page }) // 如果需要替换当前页用 replaceUrl router.replaceUrl({ url: item.page })七、扩展思考7.1 动态分类当前分类是硬编码的后续可以从接口获取State categories: ArrayCategoryItem []; aboutToAppear(): void { this.fetchCategories(); } async fetchCategories(): Promisevoid { const data await this.http.get(/api/categories); this.categories data; }7.2 更多分类如果分类超过 6 个可以改为两行或三行// 8 个分类两行每行 4 个 Column({ space: 12 }) { Row({ space: 0 }) { ForEach(items.slice(0, 4), ...) // 第一行 } Row({ space: 0 }) { ForEach(items.slice(4, 8), ...) // 第二行 } }7.3 动画效果可以为分类项添加点击动画Column() .scale(this.isPressed ? 0.95 : 1) .animation({ duration: 200 })八、本篇核心知识点8.1 六宫格导航核心要点六宫格导航核心要点总结如下width(16.66%)实现六等分ForEach循环渲染key 使用label图标徽章 48×4812vp 圆角6 种颜色搭配区分不同分类8.2 实战开发要点实战开发中需要重点关注以下几个要点百分比宽度确保各屏幕适配分类数据通过CategoryItem接口管理点击跳转用pushUrl保留返回栈后续可扩展为动态数据总结本文详细讲解了六宫格分类导航的百分比宽度实现、图标徽章设计、颜色主题搭配和点击路由跳转。下一篇我们将看最近使用横向列表——三栏均分布局。附录完整实现细节1. 核心 API 参考API作用说明本文涉及的核心 API功能实现参见华为官方文档2. 完整代码示例// 核心功能代码 // 详见正文中的完整实现3. 常见问题排查问题原因解决方案编译错误import 路径错误检查路径和 API 版本运行时异常参数不合法使用 try/catch 捕获性能问题主线程耗时操作使用异步 API4. 最佳实践错误处理完善使用 try/catch 包裹资源及时释放避免内存泄漏异步操作使用 async/await权限配置完整按需申请5. 完整代码文件索引文件路径说明本文涉及的代码文件见正文6. 实现要点总结核心实现要点API 的正确使用方法和参数说明完整的代码实现流程常见问题的排查方案性能优化和安全建议7. 总结本文详细讲解了小分享 App 中对应功能的完整实现。通过本文的学习读者可以掌握 HarmonyOS 开发的核心 API 使用方法和最佳实践。开发注意事项1. API 版本兼容性确保使用的 API 在目标 SDK 版本中可用。不同版本的 HarmonyOS 可能对 API 的支持有所不同建议查阅官方文档确认。2. 权限配置根据功能需求配置相应的系统权限。权限在 module.json5 中声明运行时通过 abilityAccessCtrl 申请。3. 错误处理所有异步操作使用 try/catch 包裹确保异常不会导致应用崩溃。错误信息通过 hilog 输出便于调试。4. 资源释放使用完毕后及时释放系统资源避免内存泄漏。例如文件操作后关闭文件句柄数据库操作后关闭 ResultSet。5. 性能优化避免在主线程执行耗时操作使用异步 API 处理耗时任务。大量数据渲染时使用 LazyForEach 懒加载。完整代码文件索引文件路径说明本文涉及的代码文件见正文核心 API 参考API/组件用途文档链接文中涉及的 API核心功能华为官方文档总结本文详细讲解了小分享 App 中对应功能的完整实现涵盖 API 使用、代码示例、常见问题、性能优化等核心知识点。通过本文的学习读者可以掌握 HarmonyOS 开发的完整流程。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力