鸿蒙原生应用 ArkUI 实战：技能交换我的页 —— 渐变卡 + 悬浮统计 + 技能卡三段式写法

一键难忘

11人浏览 · 2026-09-24 23:00:08

一键难忘 · 2026-09-24 23:00:08 发布

鸿蒙原生应用 ArkUI 实战：技能交换我的页 —— 渐变卡 + 悬浮统计 + 技能卡三段式写法

App 38「校园技能交换」我的（ProfileTab），主题色 #2D9CDB 青蓝。我的页采用"用户卡 + 统计 + 技能卡 + 菜单 + About"五区布局——青蓝渐变 UserCard（🤝 64 半透明圆形头像 + "技能交换者"标题 + "评分 4.9 · 成功交换 12 次"副标题） + 悬浮 StatRow（margin -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 37：4 统计 + 5 菜单（收藏/浏览/下载/上传/设置）
App 38：3 统计 + 我的技能卡 + 4 菜单（技能/交换/评价/设置）

“37 学习资料 vs 38 技能交换”——“37 收藏下载、38 技能评价”——“两个校园平台我的”——“38 有我的技能卡（系列首次）”——“我的页的业务差异化”。

“SkillCard 我的技能卡” 是 App 38 的特色——“展示我的技能”——“技能管理”——“技能列表”——“系列首次技能卡”——“技能交换者的核心”——“我的技能展示”。

“38 统计含评分”——“4.9 评分”——“信用评分”——“交换口碑”——“技能交换的信任”——“评分体系”。

主题色 #2D9CDB 青蓝——同首页/发布/交流——“品牌色贯穿全 App”。

校园技能交换我的首屏 · 青蓝渐变用户卡(🤝 64圆头像+技能交换者+评分4.9·成功交换12次)+悬浮3统计(3我的技能/12交换记录/4.9评分)+我的技能卡(💻Python编程精通/📷摄影后期熟练)+4菜单(🤹我的技能/🔄交换记录/⭐我的评价/⚙️设置)+底部About(校园技能交换 Version 1.0.0)

项目源码开源：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
内层 Row：64×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 35	App 36	App 37	App 38
渐变	紫罗兰	琥珀橙	考试红	青蓝
头像	✍️	📖	🎓	🤝
用户名	笔记达人	二手书达人	备考学子	技能交换者
副标题	分享获赞	成交信用	已复习	评分 4.9 交换 12 次

“四个学习/社区 App 用户卡”——“笔/书/帽/握手”——“获赞/成交/复习/评分”——“业务的演进”——“38 = 技能 + 信任”——“社区平台的完整”。

三、StatRow：3 统计悬浮卡

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 结构：

外层 Row：92% 宽 + 14 padding 上下 + 白底 + 14 圆角 + 1px 边框 + margin top -24
内层 ForEach：3 个 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 交换数据”——“统计 = 业务核心”。

38 我的页交换记录 Toast

四、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 的特色”——“技能展示”。

38 我的页我的评价 Toast

五、MenuList：4 菜单列表

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 结构：

外层 Column：92% 宽 + margin top 14 + 白底 + 14 圆角 + 1px 边框
内层 ForEach：4 个 Row（emoji + 标题 + 箭头）+ 条件 Divider

4 个菜单项（每项 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 字段足够”。

38 我的页设置 Toast

六、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 36	App 37	App 38
统计数	4	4	3
菜单数	5	5	4
特色	钱包	足迹	技能卡评分
副标题	成交	已复习	评分交换

“三个校园我的对比”——“统计 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 品牌色一致”——“品牌贯穿”。

与系列呼应：渐变 UserCard（32-37）、悬浮统计（32-37）、92% 宽卡片（系列）、emoji 菜单（系列）、0.5px Divider（系列）、About 版本（系列）——“38 我的把系列的渐变 + 悬浮 + 菜单手法组合出’技能交换’场景”。

体验细节：技能展示、评分信任、交换数据、4 统计悬浮——“我的页的核心 = 让用户’3 秒看完技能 + 1 秒进管理’”。

可扩展性展望：真实技能数据、技能编辑、交换记录详情、评价详情、设置、消息中心——“demo 的技能我的页骨架完整”。

九、扩展思考：我的页的信息架构与设计哲学

8.1 我的页的"用户视角"

5 块 = 5 个"我"：

我是谁（UserCard）——身份 + 评分
我的数据（StatRow）——技能/交换/评分
我的技能（SkillCard）——具体技能
我能做什么（MenuList）——4 功能入口
关于 App（About）——元信息

“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 margin"

margin 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。