HarmonyOS应用《玄象》开发实战：“今日天地“卡片：border + shadow + borderRadius 的金边卡片范式-云帆数科

阅读时长约 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

企业数字化 ERP 产品动态

相关推荐

HarmonyOS应用《玄象》开发实战：列表项点击 router.pushUrl 传参：params 序列化方案

阅读时长：约 18 分钟　|　难度：★★★★☆　|　篇章：第 4 篇二十八星宿模块对应源码：entry/src/main/ets/pages/mansion/MansionListPage.ets、MansionDetailPage.ets 前言列表项点击跳转详情页是移动端最经典的交互模式。玄… · 2026/9/27 22:35:19

HarmonyOS应用《玄象》开发实战：BaziInputPage 八字录入：TextInput / DatePicker / TimePicker 表单组件

阅读时长：约 19 分钟　|　难度：★★★★☆　|　篇章：第 6 篇命理八字模块对应源码：entry/src/main/ets/pages/mingli/BaziInputPage.ets 前言八字排盘的第一步是录入出生信息。玄象项目通过 BaziInputPage 提供完整的表单录入… · 2026/9/27 22:35:19

NSGAII算法在无人机3D路径规划中的Matlab实现与优化

1. 项目背景与核心价值无人机3D路径规划是当前智能飞行器领域的关键技术挑战。在复杂三维环境中，无人机需要避开建筑物、山体等障碍物，同时满足飞行时间、能耗、安全性等多重约束条件。传统单目标优化算法往往难以平衡这些相互冲突的指标，这正… · 2026/9/17 3:46:25

3个真实网站改版方案案例，新手入门必看的避坑指南

3个真实网站改版方案案例，新手入门必看的避坑指南改个需求建站公司拖一周，改个颜色还要加钱？这是很多新手入门时最崩溃的体验。你以为改版只是换个皮肤，结果对方拿着一堆技术名词跟你扯皮，周期从两周拖到两个月，钱花了不少，效果却像没变过。… · 2026/9/27 22:37:35

AI购物代理开始结账：企业网站，AI买家真的走得通吗

过去两年，企业做GEO（生成式引擎优化）大多在解决一个问题：内容能不能被AI搜索引用、提到。但2026年9月的最新数据显示，AI已经不只是"提到"品牌，而是开始替用户完成真实购买——PYMNTS Intelligenc… · 2026/9/27 22:37:29

OpenClaw 小龙虾最实用 Skill 技能推荐：TaoToken 统一 Key 接入办公自动化实战（小白必备）

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 22:37:29