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

二、底部四象 Tab

2.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(siXiang===this.currentSiXiang?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)}.layoutWeight(1).padding({top:8,bottom:8}).backgroundColor(siXiang===this.currentSiXiang?'#1A2030':'transparent').onClick(()=>{this.currentSiXiang=siXiang;this.mansions=MansionData.getMansionsBySiXiang(siXiang);})},(siXiang:string)=>siXiang)}

三、四象切换状态管理

3.1 状态变量

@StatecurrentSiXiang:string='苍龙';@Statemansions:MansionInfo[]=[];

3.2 初始化

aboutToAppear():void{this.mansions=MansionData.getMansionsBySiXiang(this.currentSiXiang);}

3.3 切换流程

用户点击"朱雀"Tab ↓ onClick 触发 ↓ this.currentSiXiang = '朱雀' ↓ this.mansions = MansionData.getMansionsBySiXiang('朱雀') ↓ @State 变化触发 UI 更新 ↓ Tab 高亮切换 + 列表数据刷新 + 圆盘颜色同步

四、四象圆盘同步

4.1 圆盘绘制

constsiXiangColors=['#00BCD4','#E91E63','#ECEFF1','#9C27B0'];for(leti=0;i<4;i++){conststartAngle=(i*90-90)*Math.PI/180;constendAngle=((i+1)*90-90)*Math.PI/180;canvas.fillStyle=siXiangColors[i]+'22';canvas.beginPath();canvas.moveTo(cx,cy);canvas.arc(cx,cy,outerR,startAngle,endAngle);canvas.closePath();canvas.fill();}

五、四象分组设计总结

5.1 三联动

玄象项目四象分组实现"Tab 点击 + 列表过滤 + 圆盘渲染"三联动：

组件	状态变化	更新操作
底部 Tab	currentSiXiang	选中态颜色切换
星宿列表	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 四象颜色映射

四象	图标	颜色	透明度	含义
苍龙	🐉	#00BCD4	30%	春之生机
朱雀	🔥	#E91E63	30%	夏之热烈
白虎	🐯	#ECEFF1	30%	秋之肃杀
玄武	🐢	#9C27B0	30%	冬之沉静

5.3 四象切换的动画效果

玄象项目四象切换时可添加过渡动画增强体验：

1. 列表项淡入：opacity从 0 到 1
2. 圆盘颜色渐变：四象分区颜色平滑过渡
3. Tab 选中态：金色高亮 + 背景色变化

六、四象分组的数据流

6.1 完整数据链路

用户点击 Tab ↓ @State currentSiXiang = '朱雀' ↓ mansions = MansionData.getMansionsBySiXiang('朱雀') ↓ @State mansions 更新 ↓ List 自动重新渲染（7 条星宿数据） ↓ 四象圆盘重新绘制（朱雀分区高亮）

七、四象分组的扩展

7.1 四象的更多属性

四象	八卦	数字	节气
苍龙	震	3	春分
朱雀	离	9	夏至
白虎	兑	7	秋分
玄武	坎	1	冬至

7.2 四象分组在玄象项目中的应用

1. 星宿列表页：四象 Tab 切换展示不同星宿
2. 四象圆盘：Canvas 绘制四象分区
3. 星宿详情页：显示星宿所属四象
4. 星野分野页：四象与列国的对应关系

7.3 四象切换的代码规范

// 四象切换方法privateswitchSiXiang(siXiang:string):void{this.currentSiXiang=siXiang;this.mansions=MansionData.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(siXiang===this.currentSiXiang?Colors.PRIMARY_GOLD:Colors.TEXT_DIM)}.layoutWeight(1).backgroundColor(siXiang===this.currentSiXiang?'#1A2030':'transparent').onClick(()=>{this.currentSiXiang=siXiang;this.mansions=MansionData.getMansionsBySiXiang(siXiang);})},(siXiang:string)=>siXiang)}

9.2 四象圆盘Canvas

constsiXiangColors=['#00BCD4','#E91E63','#ECEFF1','#9C27B0'];for(leti=0;i<4;i++){conststartAngle=(i*90-90)*Math.PI/180;constendAngle=((i+1)*90-90)*Math.PI/180;canvas.fillStyle=siXiangColors[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 四象分组的核心要点

1. 四象（苍龙、朱雀、白虎、玄武）是二十八星宿的最高层级分类
2. 每个四象包含7个星宿，共28宿
3. 四象切换使用@State状态驱动，响应式更新UI
4. 四象圆盘使用Canvas绘制，直观展示分区

10.2 常见问题

问题	原因	解决方案
Tab切换不刷新列表	@State未正确更新	检查mansions数组是否正确赋值
圆盘颜色不显示	Canvas绘制顺序错误	确保fill在stroke之前
四象图标不匹配	图标映射函数错误	检查getSiXiangIcon函数
列表数据不对	数据过滤方法错误	检查getMansionsBySiXiang方法

总结