鸿蒙原生应用 ArkUI 实战技能交换我的页 —— 渐变卡 悬浮统计 技能卡三段式写法App 38「校园技能交换」我的ProfileTab主题色#2D9CDB青蓝。我的页采用用户卡 统计 技能卡 菜单 About五区布局——青蓝渐变 UserCard 64 半透明圆形头像 技能交换者标题 评分 4.9 · 成功交换 12 次副标题悬浮 StatRowmargin -24 上移 3 我的技能 / 12 交换记录 / 4.9 评分 3 统计项SkillCard 我的技能卡我的技能标题 Python 编程 精通 / 摄影后期 熟练 2 条技能MenuList 4 菜单项 我的技能 / 交换记录 / ⭐ 我的评价 / ⚙️ 设置每项含 emoji 标题 “” 箭头 0.5px Divider底部 About“校园技能交换” “Version 1.0.0”。本篇基于38-skill-swap/entry/src/main/ets/pages/ProfileTab.ets约 121 行逐段拆解附 4 张实机截图。一、整体结构五区用户卡 统计 技能卡 菜单 About布局App 38 我的页是用户信息 数据统计 技能展示 菜单导航 底部版本的五区我的页——5 个 Builder 块build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.SkillCard() this.MenuList() this.About() } .width(100%) .padding({ bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }5 块结构UserCard— 青蓝渐变用户卡StatRow— 悬浮 3 统计卡SkillCard— 我的技能展示卡本页特色MenuList— 4 菜单列表About— 底部版本信息与 App 37 我的页对比App 374 统计 5 菜单收藏/浏览/下载/上传/设置App 383 统计 我的技能卡 4 菜单技能/交换/评价/设置“37 学习资料 vs 38 技能交换”——“37 收藏下载、38 技能评价”——“两个校园平台我的”——“38 有我的技能卡系列首次”——“我的页的业务差异化”。“SkillCard 我的技能卡” 是 App 38 的特色——“展示我的技能”——“技能管理”——“技能列表”——“系列首次技能卡”——“技能交换者的核心”——“我的技能展示”。“38 统计含评分”——“4.9 评分”——“信用评分”——“交换口碑”——“技能交换的信任”——“评分体系”。主题色#2D9CDB青蓝——同首页/发布/交流——“品牌色贯穿全 App”。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCard青蓝渐变用户卡UserCard 是青蓝渐变 头像 用户名 副标题的渐变用户卡Builder UserCard() { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(64).height(64).backgroundColor(#33FFFFFF).borderRadius(32).justifyContent(FlexAlign.Center) Column({ space: 5 }) { Text(技能交换者).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(评分 4.9 · 成功交换 12 次).fontSize(12).fontColor(#FFFFFF).opacity(0.85) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%) .padding({ top: this.safeTop 30, left: D.pad, right: D.pad, bottom: 44 }) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }UserCard 结构外层青蓝 135° 渐变背景#2D9CDB → #69B7E8 顶部 safeTop 30 padding 底部 44 padding内层 Row64×64 半透明白圆头像 32 号 文字区“技能交换者” 18 号加粗 “评分 4.9 · 成功交换 12 次” 12 号 0.85 透明linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——“青蓝 135° 渐变”——“#2D9CDB → #69B7E8”——“同首页 Banner”——“系列渐变统一”。padding({ top: this.safeTop 30, bottom: 44 })非对称 padding——“顶部安全区 底部 44 让位”——“44 StatRow 悬浮占位”——“负 margin 重叠设计”。Row().width(64).height(64).backgroundColor(#33FFFFFF).borderRadius(32)头像——“64×64 半透明白圆”——“#33FFFFFF 白 20% 透明”——“渐变上的半透明”——“borderRadius 32 圆形”。Text()32 号握手 emoji——“交换头像”——“ 握手/交换”——“技能交换者”——“emoji 头像”——“同首页 Banner”——“业务 emoji”。Text(技能交换者).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)18 号加粗白——“用户名”——“技能交换者 身份”——与 App 37 “备考学子”、App 36 “二手书达人” 对比——“交换者/学子/达人”——“身份命名”——“38 交换者”。Text(评分 4.9 · 成功交换 12 次).fontSize(12).fontColor(#FFFFFF).opacity(0.85)12 号白 0.85 透明——“副标题”——“评分 4.9 成功交换 12 次”——“评分 交换量”——“· 中点分隔”——与 App 37 “已复习 12 门课” 对比——“评分 vs 复习”——“交换 vs 学习”——“技能交换者的信任”。“评分 4.9” 的信任体系——“高评分”——“接近满分 5”——“交换口碑”——“技能质量”——“信任背书”——“交换的安全”——“技能交换的核心”。bottom: 44底部 44 padding——“悬浮 StatRow 的关键”——“重叠设计”——“负 margin -24”。与 App 37/36/35 UserCard 对比项目App 35App 36App 37App 38渐变紫罗兰琥珀橙考试红青蓝头像✍️用户名笔记达人二手书达人备考学子技能交换者副标题分享获赞成交信用已复习评分 4.9 交换 12 次“四个学习/社区 App 用户卡”——“笔/书/帽/握手”——“获赞/成交/复习/评分”——“业务的演进”——“38 技能 信任”——“社区平台的完整”。三、StatRow3 统计悬浮卡StatRow 是margin -24 上移 3 统计项的悬浮统计卡Builder StatRow() { Row() { ForEach(this.stats, (s: StatItem) { Column({ space: 4 }) { Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text) Text(s.label).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) }, (s: StatItem) s.label) } .width(92%).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 }) }StatRow 结构外层 Row92% 宽 14 padding 上下 白底 14 圆角 1px 边框 margin top -24内层 ForEach3 个 Column数值 标签margin({ top: -24 })负 margin 悬浮——“上移 24px”——“与 UserCard 重叠”——“悬浮立体”——“同 App 32-37”——“系列悬浮统一”。width(92%)92% 宽——“非满宽”——“两侧 4% 边距”——“卡片感”——“同系列”。3 个统计项数值标签3我的技能12交换记录4.9评分“3 我的技能”——“发布的技能数”——“与我的技能卡 2 条呼应1 更多”——“技能供给”——“技能数据”。“12 交换记录”——“交换次数”——“与副标题’成功交换 12 次’呼应”——“双处一致”——“交换历史”。“4.9 评分”——“信用评分”——“与副标题’评分 4.9’呼应”——“交换口碑”——“信任数据”——“评分体系”。“3 项 3 维度”技能3 交换12 评分4.9——“3 维度的交换者画像”——“技能 经验 口碑”——“技能交换的完整信任”。Column({ space: 4 }).layoutWeight(1)3 等分——“3 项等宽”——“layoutWeight 等权”——“公平展示”。Text(s.value).fontSize(18).fontWeight(FontWeight.Bold)18 号加粗黑数值——“数值焦点”——“3/12/4.9”——“含小数 4.9”——“评分的小数”。Text(s.label).fontSize(11).fontColor(C.textDim)11 号灰标签——“标签次要”——“11 号小字”。StatItem 接口2 字段interface StatItem { value: string; label: string; }2 字段极简模型——“value label”——“同 App 32-37”——“模型复用”——“4.9 字符串值”。与 App 37 StatRow 对比——“28/156/42/8 vs 3/12/4.9”——“两 App 统计”——“37 学习数据、38 交换数据”——“统计 业务核心”。四、SkillCard我的技能卡本页特色SkillCard 是“我的技能” 2 条技能的技能展示卡Builder SkillCard() { Column({ space: 10 }) { Text(我的技能).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) ForEach(this.mySkills, (s: MySkill) { Row({ space: 10 }) { Text(s.emoji).fontSize(20) Text(s.name).fontSize(14).fontColor(C.text).layoutWeight(1) Text(s.level).fontSize(11).fontColor(C.primary) .padding({ left: 8, right: 8, top: 2, bottom: 2 }).backgroundColor(C.primarySoft).borderRadius(4) }.width(100%).padding({ top: 8, bottom: 8 }) }, (s: MySkill) s.id.toString()) } .width(92%).padding(14).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }SkillCard 结构标题我的技能14 号加粗 2 条技能 Row 92% 宽 14 padding margin top 14 白底 14 圆角 1px 边框——“我的技能展示卡”——“系列首次技能卡”。2 条技能emoji技能等级Python 编程精通摄影后期熟练Text(我的技能)14 号加粗标题——“区标题”——“我的技能”——“与统计’3 我的技能’呼应”——“技能展示”。Text(s.emoji).fontSize(20)20 号技能 emoji——“”——“技能符号”——“Python/摄影”——“emoji 技能”——“低成本图标”。Text(s.name).fontSize(14)14 号技能名——“Python 编程/摄影后期”——“技能名称”——“layoutWeight 弹性”——“技能标题”。Text(s.level)精通/熟练标签——“11 号青字”——“浅青底”——“4 圆角”——“等级 tag”——“同首页等级标签”——“等级统一”。padding({ top: 8, bottom: 8 })8 padding 上下——“技能行内边距”——“紧凑”——“列表式技能行”。MySkill 模型3 字段interface MySkill { id: number; emoji: string; name: string; level: string; }4 字段id/emoji/name/level——“我的技能实体”——“名称 等级”——“极简模型”。“我的技能卡的价值”——“展示技能”——“技能管理”——“提供者视角”——“技能清单”——“交换的基础”——“38 的特色”——“技能展示”。五、MenuList4 菜单列表MenuList 是4 个菜单项 Divider的菜单列表Builder MenuList() { Column() { ForEach(this.menus, (m: MenuItem, idx: number) { Row({ space: 12 }) { Text(m.emoji).fontSize(18) Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1) Text().fontSize(14).fontColor(C.textDim) } .width(100%).padding({ left: 14, right: 14, top: 14, bottom: 14 }) .onClick(() { promptAction.showToast({ message: m.title }); }) if (idx this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (m: MenuItem) m.title) } .width(92%).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }MenuList 结构外层 Column92% 宽 margin top 14 白底 14 圆角 1px 边框内层 ForEach4 个 Rowemoji 标题 箭头 条件 Divider4 个菜单项每项 3 要素emoji标题箭头我的技能交换记录⭐我的评价⚙️设置Text(m.emoji).fontSize(18)18 号 emoji——“⭐⚙️”——“4 个功能图标”——“技能/交换/评价/设置”。Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1)14 号黑标题——“占据中间”——“菜单标题”。Text()箭头——“14 号灰”——“跳转箭头”——“通用符号”。onClick(() promptAction.showToast({ message: m.title }))点击反馈——“整行可点”——“Toast 反馈”——“占位跳转”。if (idx this.menus.length - 1) { Divider() }条件 Divider——“最后一项不画”——“0.5px 极细”——“4 项 3 分割”。4 菜单的业务 我的技能技能管理 交换记录交换历史⭐ 我的评价评价体系⚙️ 设置通用“⭐ 我的评价” 的特色——“评价体系”——“被评价/评价他人”——“交换口碑”——“评分详情”——“与评分 4.9 呼应”——“信任体系”——“38 的评价管理”。MenuItem 接口3 字段interface MenuItem { id: number; emoji: string; title: string; }3 字段id/emoji/title——“极简菜单模型”——“同 App 32-37”——“3 字段足够”。六、About底部版本信息About 是 **“校园技能交换” “Version 1.0.0”**的版本信息Builder About() { Column({ space: 4 }) { Text(校园技能交换).fontSize(12).fontColor(C.textDim) Text(Version 1.0.0).fontSize(11).fontColor(C.textDim).opacity(0.7) }.width(100%).margin({ top: 24 }) }About 结构Column 垂直 4 间距 12 号 App 名 11 号版本号0.7 透明——“极简底部信息”。“校园技能交换” 全称——“与首页’技能交换’简称对比”——“About 用全称”——“简称与全称”——“命名的场景”。Text(Version 1.0.0).fontSize(11).opacity(0.7)11 号灰 0.7 透明版本——“版本信息”——“系列 About 统一”。margin({ top: 24 })24 顶部间距——“底部呼吸”——“与菜单间距”。与 App 32-37 About 对比——“七个 App 的 About 同结构”——“系列 About 统一”——“版本信息规范”。七、我的页的交互细节与可用性分析7.1 渐变用户卡 vs 实色卡UserCard 渐变 StatRow/SkillCard/MenuList 实色——“渐变 焦点”——“实色 普通”——“层次用色彩”——“3 级视觉层级”。7.2 悬浮统计的实现margin -24 上移——“重叠立体”——“与用户卡重叠”——“悬浮层次”——“同 App 32-37”——“系列悬浮统一”。7.3 3 统计的交换者视角3 技能 12 交换 4.9 评分——“3 维度”——“技能 经验 口碑”——“交换者画像”——“信任数据”——“交换的信任”。7.4 我的技能卡的特色技能展示卡——“系列首次”——“技能管理”——“提供者视角”——“技能清单”——“交换的基础”——“38 的特色”。7.5 评分体系的信任4.9 评分——“信用评分”——“交换口碑”——“信任背书”——“交换安全”——“评分 质量”——“社区信任”。7.6 我的页的色彩心理学青蓝#2D9CDB——“蓝色 信任/专业”——“我的页的青蓝”——“技能交换的蓝”——“可信赖”。7.7 我的页的信息层级L1 身份UserCard→ L2 数据StatRow→ L3 技能SkillCard→ L4 功能MenuList→ L5 关于About——“5 层信息”——“从身份到元信息”——“用户的金字塔”。7.8 我的页的与 App 37 对比37 四统计五菜单 / 38 三统计四菜单 技能卡——“两个校园我的”——“37 学习、38 技能”——“业务差异化”——“我的页的演进”。7.9 我的页的设计哲学我的页的 3 个设计哲学身份优先——UserCard 顶部渐变最大技能优先——我的技能卡展示信任完整——评分 评价“身份 技能 信任的我的”——“社区我的页的设计原则”——“从哲学看设计”。7.11 我的页的对比与统一统一92% 宽 14 圆角 1px 边框StatRow/SkillCard/MenuList——“卡片统一”。对比UserCard 渐变 / StatRow 悬浮 / SkillCard 平铺 / MenuList 平铺 / About 文字——“5 块差异”。7.12 我的页的终评用户卡 3 统计 技能卡 4 菜单 About 完整我的页——“我的页的完成度”——“可上线级”——“系列社区我的标杆”。7.13 我的页的emoji 体系⭐⚙️——“7 个 emoji”——“交换/技能/交换记录/评价/设置/Python/摄影”——“emoji 功能”——“低成本图标”。7.14 我的页的数据一致性12 交换副标题 统计——“跨区数据”——“4.9 评分副标题 统计”——“双处一致”——“demo 数据严谨”。7.15 我的页的社区生态技能提供 交换经验 评分口碑 评价详情——“社区完整生态”——“技能到口碑”——“交换的闭环”——“我的页数据即生态”。7.17 我的页的评分小数4.9 评分——“小数评分”——“精确评分”——“0.1 精度”——“评分体系”——“信任量化”——“评分的细节”。7.18 我的页的技能管理 我的技能菜单——“技能管理”——“编辑/删除”——“技能清单”——“提供者后台”——“管理的价值”——“技能维护”。7.19 我的页的评价双向⭐ 我的评价 收到的 给出的——“双向评价”——“交换反馈”——“口碑沉淀”——“评价体系”——“信任的积累”——“社区的质量”。7.20 我的页的emoji 语义⭐⚙️——“7 个功能 emoji”——“交换/技能/记录/评价/设置/Python/摄影”——“emoji 功能识别”——“低成本图标”。7.21 我的页的拇指操作菜单在屏幕中下部——“拇指可达区”——“高频菜单居中”——“设置在最下”——“低频操作放底部”——“拇指设计”。7.22 我的页的数据来源3/12/4.9——“数据从哪来”——“技能列表统计”——“交换记录”——“评分汇总”——“demo 静态数据”——“真实化路径”。7.23 我的页的颜色一致性青蓝贯穿——“渐变卡 等级标签 主题色”——“品牌记忆”——“青蓝 技能交换”——“主题色辨识”——“色彩品牌”。7.24 我的页的demo 价值身份 数据 技能 功能 版本 完整我的页——“功能完整”——“用户可管理”——“demo 完成度”——“社区我的页标准”——“模板沉淀”。7.25 我的页的对比表格维度App 36App 37App 38统计数443菜单数554特色钱包足迹技能卡评分副标题成交已复习评分交换“三个校园我的对比”——“统计 4/4/3、菜单 5/5/4”——“特色 钱包/足迹/技能卡”——“副标题 成交/复习/评分”——“业务的差异化”——“系列我的演进”。7.26 我的页的首屏信息首屏用户卡 3 统计 技能卡 前 2 菜单——“首屏核心”——“身份 数据 技能 高频功能”——“滚动看评价设置”——“首屏信息设计”。7.27 我的页的最终设计评价用户卡 3 统计 技能卡 4 菜单 About 完整我的页——“从结构到数据到技能的完整”——“可上线级”——“系列社区我的标杆”——“我的页完成度评级”。八、总结青蓝 渐变 悬浮 技能管理App 38 我的页一句话用青蓝#2D9CDB渐变用户卡 3 统计悬浮 我的技能卡 4 菜单 底部 About 的完整我的页——青蓝渐变 UserCard 配 半透明圆形头像 “技能交换者” 评分 4.9 · 成功交换 12 次副标题悬浮 StatRow 用 -24 margin 上移展示 3/12/4.9 三维交换数据我的技能卡展示 Python 编程/摄影后期 2 条技能4 菜单用 emoji 标题 “” 箭头和 0.5px Divider 分隔底部 About 显示全称和版本。3 个设计亮点我的技能卡——系列首次技能展示与管理评分信任体系——4.9 评分 ⭐ 我的评价3 维交换数据——技能/交换/评分主题色设计逻辑青蓝 信任/专业的蓝——“我的页用青蓝与全 App 品牌色一致”——“品牌贯穿”。与系列呼应渐变 UserCard32-37、悬浮统计32-37、92% 宽卡片系列、emoji 菜单系列、0.5px Divider系列、About 版本系列——“38 我的把系列的渐变 悬浮 菜单手法组合出’技能交换’场景”。体验细节技能展示、评分信任、交换数据、4 统计悬浮——“我的页的核心 让用户’3 秒看完技能 1 秒进管理’”。可扩展性展望真实技能数据、技能编辑、交换记录详情、评价详情、设置、消息中心——“demo 的技能我的页骨架完整”。九、扩展思考我的页的信息架构与设计哲学8.1 我的页的用户视角5 块 5 个我我是谁UserCard——身份 评分我的数据StatRow——技能/交换/评分我的技能SkillCard——具体技能我能做什么MenuList——4 功能入口关于 AppAbout——元信息“5 个我的层次”——“从身份到元信息”——“用户视角的金字塔”——“自上而下的认知”。8.2 我的页的转化路径看用户卡技能交换者→ 看统计3/12/4.9→ 看技能卡Python/摄影→ 点菜单技能/评价——“从身份到行动”——“我的页的转化链”——“菜单 行动入口”——“技能管理”。8.3 我的页的业务建模MenuItem 3 字段id/emoji/title——“3 字段建模”——“极简菜单”——“最小可用集”——加 badge角标、加 extra数据预览即可扩展——“数据模型的扩展点”——“33 的 extra 是扩展示例”。8.4 我的页的设计哲学我的页的 3 个设计哲学身份优先——渐变 UserCard 视觉焦点技能优先——我的技能卡展示信任完整——评分 评价体系“身份 技能 信任的我的页”——“社区我的页的设计原则”——“从哲学看设计”——“这套方法论可直接迁移到任何技能/服务交换类 App”。8.5 我的页的终评App 38 我的页综合评估——“五区结构 青蓝主题 完整技能数据”——“我的页的完成度评级”——“一个可上线级的社区我的页”——“系列社区我的标杆”——“demo 的高完成度”。十、彩蛋我的页的细节设计9.1 “技能交换者” 的命名“技能交换者”——“交换者 参与者”——“技能提供者”——“身份命名”——“交换的身份”——“社区参与者”——“交换者的角色”。9.2 “评分 4.9” 的信任“评分 4.9”——“高评分”——“接近满分”——“交换口碑”——“信任背书”——“评分 质量”——“交换的安全”。9.3 “成功交换 12 次” 的经验“成功交换 12 次”——“交换经验”——“历史成交”——“交换活跃”——“与统计’12’呼应”——“双处一致”——“经验的证明”。9.4 “我的技能卡” 的展示“我的技能”——“技能管理”——“技能清单”——“提供者展示”——“交换基础”——“38 的特色”——“技能可视化”。9.5 3 统计的混合3/12/4.9——“整数 小数”——“评分 4.9 小数”——“统计多样”——“vs 37 的 28/156/42/8”——“统计 业务”。9.6 悬浮的-24 marginmargin top -24——“上移 24”——“重叠 24”——“悬浮高度”——“立体层次”——“同系列”。9.7 我的页的颜色体系渐变青 半透明白 黑字 灰字——“4 级颜色”——“渐变焦点→ 白头像→ 黑标题→ 灰次要”——“颜色的层级”。9.8 我的页的demo 完整性用户卡 统计 技能卡 菜单 About 完整我的页——“功能完整”——“用户可管理”——“demo 的完成度”——“从身份到管理的完整链”。9.9 我的页的信任闭环技能基础 交换经验 评分口碑 评价详情——“信任完整闭环”——“技能到口碑”——“交换的信任”——“社区的安全”。补充说明本篇所有代码引用均基于38-skill-swap/entry/src/main/ets/pages/ProfileTab.ets实际源码行号与源码一一对应4 张实机截图分别覆盖我的首屏、交换记录菜单点击、我的评价菜单点击、设置菜单点击四种差异场景全部含模拟器轮廓图床域名统一为imgbed.devzoo.top。