HarmonyOS应用《玄象》开发实战：MansionDetailPage 详情页：星宿图说 + 五行属性 + 占验断语

阅读时长约 19 分钟 | 难度★★★★☆ | 篇章第 4 篇 · 二十八星宿模块对应源码entry/src/main/ets/pages/mansion/MansionDetailPage.ets前言星宿详情页是玄象项目星宿模块的内容深度体现。用户从列表页点击某个星宿进入详情页查看该星宿的金色 Canvas 星图、四象属性、五行属性、分野、星官、文化解释等完整信息。本篇将深入剖析玄象项目星宿详情页的实现从router.getParams参数接收、MansionData.getMansionByName数据查询、Builder InfoCard信息卡片网格、Scroll Column可滚动布局到Canvas星宿插图绘制。掌握这套详情页实现方法论您就能为任何 HarmonyOS 应用打造深度内容展示页。提示详情页是内容消费的核心场景。玄象项目星宿详情页通过金边卡片网格 Canvas 星图 文化解释三部分让用户沉浸式了解每个星宿。一、MansionDetailPage 完整布局1.1 页面结构build(){Column(){// 顶部导航栏Row(){...}// 可滚动内容区Scroll(){Column({space:20}){// 星宿插图 CanvasCanvas(this.mansionIllustrationContext).width(100%).height(200)// 四象标注Text(东方苍龙第一宿)// 信息卡片网格Grid(){GridItem(){this.InfoCard(象,龙角,)}GridItem(){this.InfoCard(分野,,郑国)}GridItem(){this.InfoCard(五行,木,木)}GridItem(){this.InfoCard(对应,,春季)}GridItem(){this.InfoCard(星官,,角、平道、天田)}}// 文化解释卡片Column(){Text(文化解释)Text(this.mansion?.description)}}}.layoutWeight(1)}}1.2 数据加载aboutToAppear():void{constparamsrouter.getParams()asRecordstring,string;constnameparams[mansionName]||角宿;this.mansionMansionData.getMansionByName(name);}二、InfoCard 信息卡片网格2.1 Builder InfoCardBuilderInfoCard(title:string,icon:string,value:string){Column({space:8}){Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD)if(icon){Text(icon).fontSize(32)}Text(value).fontSize(14).fontColor(Colors.TEXT_PRIMARY)}.width(100%).height(100).justifyContent(FlexAlign.Center).backgroundColor(Colors.BG_CARD).border({width:1,color:Colors.BG_CARD_BORDER,radius:12}).borderRadius(12)}2.2 网格布局Grid(){GridItem(){this.InfoCard(象,this.mansion?.animal||,龙角)}GridItem(){this.InfoCard(分野,,this.mansion?.fenYe||)}GridItem(){this.InfoCard(五行,this.mansion?.wuXing||,this.mansion?.wuXing||)}GridItem(){this.InfoCard(对应,,this.mansion?.season||)}GridItem(){this.InfoCard(星官,,this.mansion?.xingGuan||)}}.columnsTemplate(1fr 1fr 1fr).rowsGap(12).columnsGap(12).width(100%)三、Canvas 星宿插图3.1 绘制方法privatedrawMansionIllustration(canvas:CanvasRenderingContext2D,w:number,h:number){// 背景canvas.fillStyle#0D1520;canvas.fillRect(0,0,w,h);// 星星for(leti0;i50;i){canvas.fillStylergba(255, 255, 220,${Math.random()*0.50.2});canvas.beginPath();canvas.arc(Math.random()*w,Math.random()*h,Math.random()*1.50.5,0,Math.PI*2);canvas.fill();}// 星宿连线if(this.mansion){canvas.strokeStyleColors.PRIMARY_GOLD;canvas.lineWidth1.5;canvas.beginPath();constpoints[[w*0.2,h*0.6],[w*0.35,h*0.4],[w*0.5,h*0.3],[w*0.65,h*0.35],[w*0.8,h*0.5]];canvas.moveTo(points[0][0],points[0][1]);for(leti1;ipoints.length;i){canvas.lineTo(points[i][0],points[i][1]);}canvas.stroke();for(constpofpoints){canvas.fillStyle#F0D078;canvas.beginPath();canvas.arc(p[0],p[1],4,0,Math.PI*2);canvas.fill();}}}四、文化解释卡片4.1 卡片结构Column({space:12}){Text(文化解释).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD).width(100%)Text(this.mansion?.description||).fontSize(15).fontColor(Colors.TEXT_PRIMARY).lineHeight(24).width(100%)}.width(100%).padding(16).backgroundColor(Colors.BG_CARD).border({width:1,color:Colors.PRIMARY_GOLD,radius:12}).borderRadius(12)五、详情页设计总结5.1 页面结构区域组件内容顶部导航Row返回 标题星宿插图Canvas星空 星点连线四象标注Text“东方苍龙第一宿”信息网格Grid5 个 InfoCard文化解释Column标题 描述文本5.2 数据流列表页点击 → router.pushUrl → MansionDetailPage ↓ aboutToAppear → router.getParams → getMansionByName ↓ State mansion → UI 渲染六、详情页的数据安全与容错6.1 参数验证aboutToAppear():void{constparamsrouter.getParams()asRecordstring,string;if(!params||!params[mansionName]){// 无参数时默认显示角宿this.mansionMansionData.getMansionByName(角宿);return;}this.mansionMansionData.getMansionByName(params[mansionName]);if(!this.mansion){// 未找到星宿时默认显示角宿this.mansionMansionData.getMansionByName(角宿);}}6.2 InfoCard 的组件化设计卡片字段数据来源展示方式象mansion.animal文字 图标分野mansion.fenYe文字五行mansion.wuXing文字 颜色对应mansion.season文字星官mansion.xingGuan文字6.3 详情页的视觉设计规范信息分层插图视觉层→ 属性网格信息层→ 文化解释内容层一致性金边卡片样式与全应用保持一致可读性lineHeight(24)确保长文本的阅读舒适度七、详情页的扩展方向7.1 添加滚动浏览Scroll(){Column({space:20}){// 星宿插图// 信息卡片网格// 文化解释// 相关星宿推荐}}.layoutWeight(1)7.2 添加相关星宿推荐BuilderRelatedMansions(){Column({space:12}){Text(同象星宿).fontSize(18).fontColor(Colors.PRIMARY_GOLD)Row({space:8}){ForEach(this.relatedMansions,(m:MansionInfo){Text(m.name).fontSize(14).fontColor(Colors.TEXT_PRIMARY).padding(8).backgroundColor(Colors.BG_CARD).borderRadius(8).onClick((){this.mansionm;})})}}}7.3 详情页的响应式适配屏幕宽度布局策略网格列数 360vp紧凑布局2 列360~720vp标准布局3 列 720vp宽松布局4 列八、详情页的交互优化8.1 详情页的加载状态StateisLoading:booleantrue;aboutToAppear():void{this.isLoadingtrue;constparamsrouter.getParams()asRecordstring,string;constnameparams[mansionName]||角宿;// 模拟数据加载延迟setTimeout((){this.mansionMansionData.getMansionByName(name);this.isLoadingfalse;},300);}build(){if(this.isLoading){// 加载中状态LoadingProgress().color(Colors.PRIMARY_GOLD).width(50).height(50)}else{// 正常内容this.buildContent();}}8.2 详情页的分享功能BuilderShareButton(){Text(分享).fontSize(14).fontColor(Colors.PRIMARY_GOLD).onClick((){// 调用系统分享constshareData{title:星宿${this.mansion?.name},text:this.mansion?.description||};// 系统分享API})}8.3 详情页的收藏功能功能实现方式存储方式收藏星宿State isFavoritedpreferences最近浏览State recentListrelationalStore分享星宿系统分享API临时数据九、详情页的视觉设计规范9.1 信息层级玄象项目星宿详情页的信息层级遵循从上到下、从宏观到微观的原则视觉层星宿插图 Canvas200px 高标识层四象标注“东方苍龙第一宿”信息层5 个属性卡片网格内容层文化解释文本9.2 色彩规范元素颜色用途插图背景#0D1520星空深色背景属性卡片Colors.BG_CARD卡片背景标题文字Colors.PRIMARY_GOLD金色强调正文文字Colors.TEXT_PRIMARY白色正文分隔线Colors.BG_CARD_BORDER灰色分割线9.3 详情页的排版规范插图区域200px 高度深色背景衬托金色星点四象标注字号 16居中显示灰色文字信息卡片3 列网格每项 100px 高度文化解释字号 15lineHeight 24阅读舒适页面内边距左右 16vp上下 20vp十、总结与最佳实践10.1 详情页开发要点参数安全始终检查router.getParams()的返回值数据容错查询不到数据时设置默认值加载体验数据加载时显示 LoadingProgress视觉层次插画→属性→文字逐层递进响应式适配不同屏幕调整网格列数10.2 详情页开发常见问题问题解决方案参数获取失败使用默认值兜底数据加载慢添加 LoadingProgress 加载态图片资源缺失使用 Canvas 动态绘制替代布局错乱使用 Scroll layoutWeight 弹性布局总结本篇以玄象项目星宿详情页为蓝本深入剖析了 ArkUI 详情页实现从router.getParams参数接收、MansionData.getMansionByName数据查询、Builder InfoCard信息卡片网格到Canvas星宿插图绘制与lineHeight文本行高控制。掌握这套详情页实现方法论您就能为任何 HarmonyOS 应用打造深度内容展示页。下一篇《34 · StarTerritoryPage 星野分野分封列国与星宿对应关系图》将带您深入玄象项目星野分野页的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档router.getParamsHarmonyOS 官方文档Grid 组件开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net