HarmonyOS应用《玄象》开发实战：Grid 四象（青龙/白虎/朱雀/玄武）分组展示

阅读时长约 18 分钟 | 难度★★★★☆ | 篇章第 4 篇 · 二十八星宿模块对应源码entry/src/main/ets/pages/mansion/MansionListPage.ets前言玄象项目星宿列表页最核心的交互是四象切换——用户点击底部「苍龙/朱雀/白虎/玄武」Tab列表内容自动切换为对应四象的 7 个星宿。这一功能通过State currentSiXiang状态变量 MansionData.getMansionsBySiXiang数据过滤实现。本篇将深入剖析玄象项目四象分组展示的实现从四象数据结构、底部 Tab 交互、State状态切换、数据过滤渲染到Canvas四象圆盘同步更新。掌握这套分组展示方法论您就能为任何 HarmonyOS 应用打造分类切换的列表页。提示四象青龙、白虎、朱雀、玄武是二十八星宿的最高层级分类。玄象项目通过 Tab 切换 圆盘渲染 列表过滤三联动实现完整的四象分组体验。一、四象分组数据结构1.1 四象顺序// MansionData.etsstaticreadonlySI_XIANG_ORDER:string[][苍龙,朱雀,白虎,玄武];1.2 四象颜色四象颜色Canvas 色值苍龙青#00BCD4朱雀红#E91E63白虎白#ECEFF1玄武紫#9C27B0二、底部四象 Tab2.1 Tab 实现Row(){ForEach(MansionData.SI_XIANG_ORDER,(siXiang:string){Column({space:4}){Text(this.getSiXiangIcon(siXiang)).fontSize(24)Text(this.getSiXiangName(siXiang)).fontSize(12).fontColor(siXiangthis.currentSiXiang?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)}.layoutWeight(1).padding({top:8,bottom:8}).backgroundColor(siXiangthis.currentSiXiang?#1A2030:transparent).onClick((){this.currentSiXiangsiXiang;this.mansionsMansionData.getMansionsBySiXiang(siXiang);})},(siXiang:string)siXiang)}三、四象切换状态管理3.1 状态变量StatecurrentSiXiang:string苍龙;Statemansions:MansionInfo[][];3.2 初始化aboutToAppear():void{this.mansionsMansionData.getMansionsBySiXiang(this.currentSiXiang);}3.3 切换流程用户点击朱雀Tab ↓ onClick 触发 ↓ this.currentSiXiang 朱雀 ↓ this.mansions MansionData.getMansionsBySiXiang(朱雀) ↓ State 变化触发 UI 更新 ↓ Tab 高亮切换 列表数据刷新 圆盘颜色同步四、四象圆盘同步4.1 圆盘绘制constsiXiangColors[#00BCD4,#E91E63,#ECEFF1,#9C27B0];for(leti0;i4;i){conststartAngle(i*90-90)*Math.PI/180;constendAngle((i1)*90-90)*Math.PI/180;canvas.fillStylesiXiangColors[i]22;canvas.beginPath();canvas.moveTo(cx,cy);canvas.arc(cx,cy,outerR,startAngle,endAngle);canvas.closePath();canvas.fill();}五、四象分组设计总结5.1 三联动玄象项目四象分组实现Tab 点击 列表过滤 圆盘渲染三联动组件状态变化更新操作底部 TabcurrentSiXiang选中态颜色切换星宿列表mansions数组数据源切换四象圆盘Canvas 重新绘制分区颜色高亮5.2 数据流用户点击 Tab ↓ State currentSiXiang 更新 ↓ Tab 高亮切换 ↓ MansionData.getMansionsBySiXiang() ↓ State mansions 更新 ↓ List 自动刷新五、四象分组的视觉设计5.1 四象图标设计privategetSiXiangIcon(siXiang:string):string{switch(siXiang){case苍龙:return;case朱雀:return;case白虎:return;case玄武:return;default:return;}}5.2 四象颜色映射四象图标颜色透明度含义苍龙#00BCD430%春之生机朱雀#E91E6330%夏之热烈白虎#ECEFF130%秋之肃杀玄武#9C27B030%冬之沉静5.3 四象切换的动画效果玄象项目四象切换时可添加过渡动画增强体验列表项淡入opacity从 0 到 1圆盘颜色渐变四象分区颜色平滑过渡Tab 选中态金色高亮 背景色变化六、四象分组的数据流6.1 完整数据链路用户点击 Tab ↓ State currentSiXiang 朱雀 ↓ mansions MansionData.getMansionsBySiXiang(朱雀) ↓ State mansions 更新 ↓ List 自动重新渲染7 条星宿数据 ↓ 四象圆盘重新绘制朱雀分区高亮七、四象分组的扩展7.1 四象的更多属性四象八卦数字节气苍龙震3春分朱雀离9夏至白虎兑7秋分玄武坎1冬至7.2 四象分组在玄象项目中的应用星宿列表页四象 Tab 切换展示不同星宿四象圆盘Canvas 绘制四象分区星宿详情页显示星宿所属四象星野分野页四象与列国的对应关系7.3 四象切换的代码规范// 四象切换方法privateswitchSiXiang(siXiang:string):void{this.currentSiXiangsiXiang;this.mansionsMansionData.getMansionsBySiXiang(siXiang);this.redrawMansionWheel();}// 四象圆盘重绘privateredrawMansionWheel():void{this.mansionWheelContext.clearRect(0,0,300,300);this.drawMansionWheel(this.mansionWheelContext,300,300);}八、四象分组的设计原则8.1 视觉一致性四象分组的颜色、图标、字体等视觉元素保持全应用一致。8.2 交互反馈切换四象时列表、圆盘、Tab 三项联动确保用户操作得到即时反馈。8.3 数据驱动四象分组完全基于MansionData数据驱动新增或修改四象数据只需修改数据模型。总结本篇以玄象项目四象分组展示为蓝本深入剖析了 ArkUI 分类切换实现从四象数据结构、State currentSiXiang状态切换、MansionData.getMansionsBySiXiang数据过滤到 Tab 高亮切换与列表刷新。四象分组是二十八星宿模块的核心交互方式通过Tab切换、列表刷新和圆盘联动的三重反馈为用户提供流畅的浏览体验。通过本文的详细讲解您应该能够掌握 ArkUI 中分类切换的实现方法并应用到自己的项目中。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档ForEach 组件HarmonyOS 官方文档Grid 组件HarmonyOS 官方文档List 组件HarmonyOS 官方文档Canvas 组件HarmonyOS 官方文档Scroll 组件HarmonyOS 官方文档Column 组件HarmonyOS 官方文档Row 组件HarmonyOS 官方文档Stack 组件HarmonyOS 官方文档Text 组件HarmonyOS 官方文档Button 组件HarmonyOS 官方文档Image 组件四象wikipedia.org/wiki/四象二十八宿wikipedia.org/wiki/二十八宿开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net九、四象分组的完整代码示例9.1 四象Tab切换Row(){ForEach(MansionData.SI_XIANG_ORDER,(siXiang:string){Column({space:4}){Text(this.getSiXiangIcon(siXiang)).fontSize(24)Text(this.getSiXiangName(siXiang)).fontSize(12).fontColor(siXiangthis.currentSiXiang?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)}.layoutWeight(1).backgroundColor(siXiangthis.currentSiXiang?#1A2030:transparent).onClick((){this.currentSiXiangsiXiang;this.mansionsMansionData.getMansionsBySiXiang(siXiang);})},(siXiang:string)siXiang)}9.2 四象圆盘CanvasconstsiXiangColors[#00BCD4,#E91E63,#ECEFF1,#9C27B0];for(leti0;i4;i){conststartAngle(i*90-90)*Math.PI/180;constendAngle((i1)*90-90)*Math.PI/180;canvas.fillStylesiXiangColors[i]22;canvas.beginPath();canvas.moveTo(cx,cy);canvas.arc(cx,cy,outerR,startAngle,endAngle);canvas.closePath();canvas.fill();}9.3 四象切换数据流用户点击Tab → State currentSiXiang更新 → mansions数组过滤 → List自动刷新 → 四象圆盘重绘十、总结与最佳实践10.1 四象分组的核心要点四象苍龙、朱雀、白虎、玄武是二十八星宿的最高层级分类每个四象包含7个星宿共28宿四象切换使用State状态驱动响应式更新UI四象圆盘使用Canvas绘制直观展示分区10.2 常见问题问题原因解决方案Tab切换不刷新列表State未正确更新检查mansions数组是否正确赋值圆盘颜色不显示Canvas绘制顺序错误确保fill在stroke之前四象图标不匹配图标映射函数错误检查getSiXiangIcon函数列表数据不对数据过滤方法错误检查getMansionsBySiXiang方法总结