阅读时长：约 18 分钟 | 难度：★★★★☆ | 篇章：第 7 篇 · 风水罗盘模块 对应源码：entry/src/main/ets/pages/fengshui/FengshuiHomePage.ets

前言

风水门户是玄象项目风水模块的入口页。页面展示“风水罗盘““GPS 风水分析”“AI 拍照风水”“风水报告“四大功能入口，以及最近分析记录。本篇将深入剖析玄象项目风水门户页的实现：从功能入口卡片布局、RecentRecord记录列表、router.pushUrl跳转，到卡片交互视觉设计。掌握这套门户页实现方法论，您就能为任何 HarmonyOS 应用构建功能聚合入口。

提示：玄象项目风水门户页与首页九宫格结构相似，但采用“卡片列表“布局而非“网格“布局。

一、功能入口

1.1 四大功能入口

// 风水罗盘 Row() { Column({ space: 6 }) { Text('风水罗盘').fontSize(18).fontColor(Colors.PRIMARY_GOLD) Text('传统罗盘定向，精准分析').fontSize(12).fontColor(Colors.TEXT_SECONDARY) } .layoutWeight(1) Text('☯').fontSize(36).fontColor(Colors.PRIMARY_GOLD) } .onClick(() => { router.pushUrl({ url: 'pages/fengshui/LuopanPage' }); })

二、最近记录

2.1 记录列表

@State recentRecords: RecentRecord[] = [ { title: '办公室风水分析', date: '2026-01-15', score: '82' }, { title: '住宅朝向分析', date: '2026-01-10', score: '76' }, { title: '客厅布局评估', date: '2026-01-05', score: '88' } ];

三、风水门户页设计总结

3.1 页面结构

总结

本篇以玄象项目风水门户页为蓝本，深入剖析了 ArkUI 功能入口页的实现：从功能入口卡片布局、RecentRecord记录列表、router.pushUrl跳转，到卡片交互视觉设计。掌握这套门户页实现方法论，您就能为任何 HarmonyOS 应用构建功能聚合入口。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net