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.ets
static readonly SI_XIANG_ORDER: string[] = ['苍龙', '朱雀', '白虎', '玄武'];

1.2 四象颜色

二、底部四象 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 状态变量

@State currentSiXiang: string = '苍龙';
@State mansions: 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 圆盘绘制

const siXiangColors = ['#00BCD4', '#E91E63', '#ECEFF1', '#9C27B0'];
for (let i = 0; i < 4; i++) {
  const startAngle = (i * 90 - 90) * Math.PI / 180;
  const endAngle = ((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 点击 + 列表过滤 + 圆盘渲染"三联动：

5.2 数据流

用户点击 Tab
  ↓
@State currentSiXiang 更新
  ↓
Tab 高亮切换
  ↓
MansionData.getMansionsBySiXiang()
  ↓
@State mansions 更新
  ↓
List 自动刷新

五、四象分组的视觉设计

5.1 四象图标设计

private getSiXiangIcon(siXiang: string): string {
  switch (siXiang) {
    case '苍龙': return '🐉';
    case '朱雀': return '🔥';
    case '白虎': return '🐯';
    case '玄武': return '🐢';
    default: return '';
  }
}

5.2 四象颜色映射

5.3 四象切换的动画效果

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

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

六、四象分组的数据流

6.1 完整数据链路

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

七、四象分组的扩展

7.1 四象的更多属性

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

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

7.3 四象切换的代码规范

// 四象切换方法
private switchSiXiang(siXiang: string): void {
  this.currentSiXiang = siXiang;
  this.mansions = MansionData.getMansionsBySiXiang(siXiang);
  this.redrawMansionWheel();
}

// 四象圆盘重绘
private redrawMansionWheel(): 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

const siXiangColors = ['#00BCD4', '#E91E63', '#ECEFF1', '#9C27B0'];
for (let i = 0; i < 4; i++) {
  const startAngle = (i * 90 - 90) * Math.PI / 180;
  const endAngle = ((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 常见问题

总结