阅读时长约 19 分钟 | 难度★★★★☆ | 篇章第 3 篇 · 首页与功能导航对应源码entry/src/main/ets/pages/HomePage.ets中的TodayHeavenCardBuilder前言今日天地卡片是玄象项目首页的视觉核心。这张卡片融合了太极图、五行环绕、宜忌标签三大中华玄学元素通过金边、阴影、圆角三大 ArkUI 样式属性营造出东方金玉的质感。本篇将深入剖析玄象项目TodayHeavenCard的实现细节从Builder装饰器、border边框复合属性、shadow阴影投影、borderRadius圆角控制到ColumnStack嵌套布局。掌握这套金边卡片范式您就能为任何 HarmonyOS 应用打造精致的卡片视觉。提示卡片是移动端 UI 的核心载体。玄象项目今日天地卡片是 ArkUI 卡片设计的典范。一、TodayHeavenCard 完整源码1.1 源码全貌BuilderTodayHeavenCard(){Column({space:16}){Text(今日天地).fontSize(22).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD).width(100%).textAlign(TextAlign.Center)// 太极五行环绕Stack(){Canvas(this.taijiContext).width(180).height(180).onReady((){this.drawTaiji(this.taijiContext,this.taijiContext.width,this.taijiContext.height);})ForEach([火,木,山,水,金],(item:string,index:number){Text(item).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).width(44).height(44).textAlign(TextAlign.Center).backgroundColor(Colors.BG_CARD).border({width:1.5,color:Colors.PRIMARY_GOLD,radius:22}).borderRadius(22).position(this.getFiveElementPosition(index,180,44))},(item:string)item)}.width(220).height(220).align(Alignment.Center)// 宜忌标签Row({space:8}){// ...}.width(100%).justifyContent(FlexAlign.Center)}.width(100%).padding(20).backgroundColor(Colors.BG_CARD).border({width:1,color:Colors.PRIMARY_GOLD,radius:16}).borderRadius(16).shadow({radius:12,color:#33D4A843,offsetX:0,offsetY:4})}1.2 卡片结构层次TodayHeavenCard (Column) ├── Text 今日天地 ← 标题 ├── Stack (太极 五行环绕) │ ├── Canvas (太极图) │ └── ForEach (五行徽章) │ ├── Text 火 │ ├── Text 木 │ ├── Text 山 │ ├── Text 水 │ └── Text 金 └── Row (宜忌标签云)二、Builder 装饰器2.1 Builder 的作用Builder是 ArkUI 的自定义构建函数装饰器用于封装可复用的 UI 片段。2.2 Builder vs Component维度BuilderComponent性质函数组件状态无独立状态可有 State复用同组件内跨组件参数方法参数Prop / Link2.3 玄象项目 Builder 使用BuilderTodayHeavenCard(){Column({space:16}){// ...}.shadow({radius:12,color:#33D4A843,offsetX:0,offsetY:4})}玄象项目将今日天地卡片封装为Builder在build()中调用build(){Column(){this.TodayHeavenCard()// ← 调用 Builderthis.FeatureGrid()// ← 另一个 Builder}}提示Builder 让玄象项目HomePage的build()方法保持简洁。复杂 UI 片段都封装为 Builder。三、border 边框复合属性3.1 玄象项目 border 配置.border({width:1,color:Colors.PRIMARY_GOLD,radius:16})属性值含义width1边框宽度 1vpcolorColors.PRIMARY_GOLD边框颜色金色radius16边框圆角 16vp3.2 border 的完整参数.border({width:number|EdgeWidths,// 边框宽度color:ResourceColor|EdgeColors,// 边框颜色radius:number|BorderRadiuses,// 边框圆角style:BorderStyle// 边框样式})3.3 分方向边框玄象项目底部导航栏使用分方向边框.border({width:{top:1},color:Colors.BG_CARD_BORDER})仅在顶部绘制 1vp 边框。3.4 border 与 borderRadius 的关系玄象项目同时使用border.radius与borderRadius.border({width:1,color:Colors.PRIMARY_GOLD,radius:16}).borderRadius(16)实际上border.radius已设置圆角borderRadius(16)是冗余的。建议保留borderRadius因为它在某些渲染路径下优先级更高。提示玄象项目五行徽章使用border.radius: 22创建圆形徽章44×44半径 22 完整圆。四、shadow 阴影投影4.1 玄象项目 shadow 配置.shadow({radius:12,color:#33D4A843,offsetX:0,offsetY:4})属性值含义radius12阴影模糊半径color#33D4A84320% 透明度金色offsetX0X 轴偏移 0offsetY4Y 轴偏移 4vp向下4.2 阴影的视觉[卡片主体] ↓ [金色阴影向下扩散 4vp模糊半径 12vp]阴影模拟卡片悬浮的物理感金色阴影与卡片金边呼应。4.3 阴影颜色 #33D4A843 解析部分值含义Alpha3320% 透明度RedD4212GreenA8168Blue4367颜色#D4A843即Colors.PRIMARY_GOLD阴影与边框同色。提示玄象项目Styles.SHADOW_GOLD已封装该阴影配置。TodayHeavenCard也可直接用.shadow(Styles.SHADOW_GOLD)。五、padding 内边距5.1 玄象项目 padding 配置.padding(20)padding(20)表示四周内边距均为 20vp。5.2 padding 的多种写法// 1. 单值四周相同.padding(20)// 2. 对象分方向.padding({left:16,right:16,top:20,bottom:20})// 3. 对象水平 垂直.padding({horizontal:16,vertical:20})5.3 padding 与内容布局┌── padding: 20 ──┐ │ │ │ [卡片内容] │ │ │ └──────────────────┘padding: 20让卡片内容与边框保持 20vp 间距避免内容贴边。六、backgroundColor 背景色6.1 玄象项目 backgroundColor 配置.backgroundColor(Colors.BG_CARD)Colors.BG_CARD #1A1F2E深色卡片背景。6.2 卡片背景与页面背景的对比区域颜色视觉效果页面背景Colors.BG_DARK #0A0E17更深卡片背景Colors.BG_CARD #1A1F2E较浅颜色对比让卡片在页面背景上浮起。七、太极图与五行环绕7.1 Stack 容器Stack(){Canvas(this.taijiContext)// 底层太极图.width(180).height(180)ForEach([火,木,山,水,金],...)// 上层五行徽章}.width(220).height(220).align(Alignment.Center)7.2 太极图 CanvasCanvas(this.taijiContext).width(180).height(180).onReady((){this.drawTaiji(this.taijiContext,this.taijiContext.width,this.taijiContext.height);})太极图尺寸 180×180绘制逻辑已在第 13 篇详解。7.3 五行徽章 ForEachForEach([火,木,山,水,金],(item:string,index:number){Text(item).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).width(44).height(44).textAlign(TextAlign.Center).backgroundColor(Colors.BG_CARD).border({width:1.5,color:Colors.PRIMARY_GOLD,radius:22}).borderRadius(22).position(this.getFiveElementPosition(index,180,44))},(item:string)item)7.4 五行徽章视觉火 ┌─────┐ 金 │ 太极 │ 木 │ 图 │ 山 │ │ 水 └─────┘5 个五行徽章围绕太极图呈五角星分布。提示玄象项目五行徽章使用金边圆形与卡片金边视觉一致。八、宜忌标签云8.1 Row 容器Row({space:8}){Row({space:6}){Text(宜).backgroundColor(Colors.YI_GREEN)ForEach(this.yiItems,(item:string){Text(item).backgroundColor(#334CAF50)},(item:string)item)}Row({space:6}){Text(忌).backgroundColor(Colors.JI_RED)ForEach(this.jiItems,(item:string){Text(item).backgroundColor(#33F44336)},(item:string)item)}}.width(100%).justifyContent(FlexAlign.Center)8.2 宜忌标签视觉[宜] [祭祀] [祈福] [忌] [开市] [动土]绿色宜标签 绿色宜事项红色忌标签 红色忌事项。8.3 标签的 borderRadiusText(宜).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).backgroundColor(Colors.YI_GREEN).padding({left:10,right:10,top:4,bottom:4}).borderRadius(12)borderRadius(12)让标签四角圆润符合移动端 UI 规范。九、金边卡片范式总结9.1 五大核心样式样式属性玄象项目值边框border{ width: 1, color: PRIMARY_GOLD, radius: 16 }圆角borderRadius16阴影shadow{ radius: 12, color: #33D4A843, offsetX: 0, offsetY: 4 }内边距padding20背景backgroundColorColors.BG_CARD9.2 卡片样式封装玄象项目可将金边卡片样式封装为Styles.GOLD_CARD// Styles.etsexportclassStyles{staticreadonlyGOLD_CARD:object{width:100%,padding:20,backgroundColor:Colors.BG_CARD,border:{width:1,color:Colors.PRIMARY_GOLD,radius:16},borderRadius:16,shadow:{radius:12,color:#33D4A843,offsetX:0,offsetY:4}};}提示ArkUI 当前不支持样式对象一次性应用需逐个属性设置。未来版本可能支持类似 CSS class 的机制。十、玄象项目卡片视觉一致性10.1 统一卡片范式玄象项目所有卡片遵循统一范式金边Colors.PRIMARY_GOLD深色背景Colors.BG_CARD圆角 16vp金色阴影10.2 视觉一致性收益维度收益用户认知用户一眼识别这是卡片品牌统一金色主题贯穿全应用开发效率复用样式减少重复代码总结本篇以玄象项目首页今日天地卡片为蓝本深入剖析了 ArkUI 金边卡片范式从Builder装饰器、border边框复合属性、shadow阴影投影、borderRadius圆角控制到ColumnStack嵌套布局与五行环绕太极。掌握这套金边卡片范式您就能为任何 HarmonyOS 应用打造精致统一的卡片视觉。下一篇《23 · 五行环绕太极Stack 定位 getFiveElementPosition 三角函数布局》将带您深入五行徽章环绕太极图的布局算法。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档Builder 装饰器HarmonyOS 官方文档border 属性HarmonyOS 官方文档shadow 属性开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net