鸿蒙原生应用开发实战：智能衣橱我的页 —— 渐变用户卡与悬浮统计的组合技

App 28「智能衣橱管理」我的 Tab（ProfileTab），主题色 #BE185D 品红（rose）。我的页是系列第三个"渐变用户卡"型个人中心（App 26/27 后）——UserCard（👗 头像 + 穿搭达人 + 本周 5 套穿搭，品红→粉 135° 渐变）+ StatRow（48 衣物总数/12 穿搭方案/5 收藏搭配/8 穿搭记录，margin:-24 悬浮）+ MenuList（5 菜单：穿搭记录/收藏搭配/衣物分类/天气偏好/设置）+ About（智能衣橱管理/Version 1.0.0）。本篇基于 28-smart-wardrobe/entry/src/main/ets/pages/ProfileTab.ets（约 101 行）逐段拆解，附 4 张实机截图。

一、整体结构：4 块"个人中心"布局

我的页是"用户卡 + 数据 + 菜单 + 关于"的个人中心布局——4 个 @Builder 块：

build() {
  Column() {
    Scroll() {
      Column() {
        this.UserCard()
        this.StatRow()
        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)
}

4 块结构：

1. UserCard — 品红渐变用户卡（头像 + 昵称 + 副文案）
2. StatRow — 4 项数据统计（悬浮卡）
3. MenuList — 5 个功能菜单
4. About — 关于/版本

与 App 27 我的页对比：App 27 有"推送开关"（NotifyCard）、App 28 回到 4 段式（无开关）——"28 的我的页是'标准四段式'"——"每个 App 的个人中心按业务需要加减模块"——衣橱 App 没有"推送开关"级别的核心设置（天气偏好已在菜单里）——"个人中心的模块 = 业务的设置需求"。

主题色 #BE185D 品红——用户卡渐变（品红 → 粉）——"品红渐变 = 衣橱时尚的最高浓度"。

与 App 26/27 我的页的结构对比：

模块	26 AI PPT	27 提醒	28 衣橱
用户卡	🖼️ PPT 创作者	🔔 时间管家	👗 穿搭达人
统计	12/6/48/2	36/8/5/12	48/12/5/8
特色模块	无	推送开关	无
菜单	5 项	5 项	5 项
渐变	暖橙→浅橙	琥珀→亮黄	品红→粉

"同一模板、三种气质"——"渐变色 + 业务数据 = 个人中心的差异化"——28 的品红渐变最"时尚"。

项目源码开源：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('本周 5 套穿搭').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]] })
}

用户卡结构：

• 👗 32 号头像（64×64 圆形）——#33FFFFFF 半透明白底——系列同款
• "穿搭达人"（18 号加粗白）——昵称（"穿搭达人" = 时尚达人身份——衣橱 App 的用户角色）
• "本周 5 套穿搭"（12 号白 0.85）——副文案（"本周产出"——与统计"5 收藏搭配"呼应）

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——品红 → 粉对角渐变——"系列渐变模板的第三次应用"（26 暖橙、27 琥珀、28 品红）——"品红 → 粉 = 玫瑰到桃花的过渡"——"渐变是系列个人中心的固定仪式"。

为什么用 👗 做头像？——"👗 = 连衣裙 = 时尚的象征"——App 28 的产品核心是穿搭，连衣裙是最具"穿搭代表性"的单品——"头像 emoji = 产品灵魂的符号化"——与 App 26 🖼️（PPT）、App 27 🔔（提醒）同理。

副文案数据呼应："本周 5 套穿搭" ↔ 统计"5 收藏搭配"——"副文案与统计的同数呼应"——"个人中心的数据自洽"。

padding({ bottom: 44 }) 底部留白——为悬浮统计卡预留——系列标准——"渐变卡留白 = 悬浮卡的落点"。

三、StatRow：悬浮统计卡

StatRow 是 4 项数据的统计卡——margin: { top: -24 } 悬浮：

@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 })
}

4 项数据：

1. 48 衣物总数（衣橱规模）
2. 12 穿搭方案（生成方案）
3. 5 收藏搭配（收藏数）
4. 8 穿搭记录（历史记录）

与首页 StatGrid 的对比：首页统计"48/12/5/8"（衣物总数/穿搭方案/本周穿搭/收藏搭配）、我的页"48/12/5/8"（衣物总数/穿搭方案/收藏搭配/穿搭记录）——"首页与我的页统计几乎一致"——"同一数据在不同页面的展示"——首页强调"本周穿搭"（当周）、我的页强调"穿搭记录"（历史）——"统计维度的微调 = 页面角色的差异"。

margin({ top: -24 }) 悬浮——同 App 26/27——"渐变卡留 44、统计卡上移 24、露 20"——"悬浮设计的数学恒定"。

统计卡样式：92% 宽 + 白底 + 圆角 + 描边 + 4 等分——系列同款——"统计卡是系列个人中心的固定组件"。

数据呼应：

• 48 衣物总数 ↔ 衣橱页衣物数据（总量）✓
• 12 穿搭方案 ↔ 穿搭页记录（部分）✓
• 5 收藏搭配 ↔ 穿搭页 ❤️ 收藏数 ✓
• 8 穿搭记录 ↔ 穿搭页 4 条记录（更多历史）✓

"我的页统计 = 全 App 数据的汇总报表"——"统计的跨页自洽"——demo 各页静态但数字互相呼应——"数字一致性 = 可信度"。

四、MenuList：5 菜单列表

MenuList 是 5 个功能菜单的列表（emoji + 标题 + 箭头）：

@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: 16 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}

5 个菜单：

1. 📋 穿搭记录——历史穿搭管理
2. ❤️ 收藏搭配——收藏的穿搭
3. 👗 衣物分类——衣物分类管理
4. 🌤️ 天气偏好——天气相关设置
5. ⚙️ 设置——通用设置

5 个菜单与 App 功能对应：

• 穿搭记录 → 穿搭页记录列表
• 收藏搭配 → 穿搭页 ❤️ 收藏
• 衣物分类 → 衣橱页分类 Chip
• 天气偏好 → 首页天气卡的设置（推荐偏好）
• 设置 → 通用（占位）

"菜单 = 全 App 功能地图"——我的页把首页（天气）、衣橱（分类）、穿搭（记录/收藏）的功能全部收拢——"个人中心是功能的总目录"——"菜单设计 = 业务的完整映射"。

菜单结构：18 号 emoji → 14 号标题 → ">" 灰箭头——系列同款——"菜单行是系列个人中心的固定组件"。

Divider 最后一行不画线——if (idx < length - 1)——系列标准——"5 行 4 条线"。

点击反馈：Toast 弹菜单名——"占位跳转"。

❤️ 菜单与穿搭页收藏的呼应——"菜单用 ❤️ emoji 与穿搭页收藏符号一致"——"跨页符号统一"——用户看到 ❤️ 就知道是"收藏"——"图标语言的跨页一致性"。

五、About：关于/版本

About 是 产品名 + 版本号的关于区：

@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 })
}

两层关于信息：

• "智能衣橱管理"（12 号灰）——产品全名
• "Version 1.0.0"（11 号灰 0.7）——版本号

产品名与 README 一致——README 标题"智能衣橱管理" ✓——"UI 与工程信息一致"。

版本号 "1.0.0" 与工程一致——README version 1.0.0 ✓——"demo 细节的严谨"。

版本区样式：底部居中、浅色小字、opacity(0.7) 最弱层级——系列同款——"关于区是系列个人中心的固定收尾"。

六、数据模型与状态管理

StatItem 模型（2 字段）：value/label——系列同款。 MenuItem 模型（3 字段）：id/emoji/title——系列同款。

我的页无业务 @State——只有 @StorageProp 安全区——"纯展示个人中心"——与 App 27（有 notifyOn 状态）对比——"个人中心的状态有无 = 是否有核心设置"——28 无开关类核心设置，故纯展示——"状态设计跟随业务"。

C 主题色在本页的运用：

• 渐变：C.primary（品红）→ C.accent（粉）
• 半透明：#33FFFFFF 头像底
• 文本层级：白字（渐变上）→ 深字（统计）→ 灰字（辅助）

与 App 26/27 我的页的渐变对比：

App	渐变	气质
26	暖橙→浅橙	创造/产出
27	琥珀→亮黄	提醒/时间
28	品红→粉	时尚/衣橱

"渐变色 = 产品气质"——"同一模板，换色即换品牌"——28 的品红渐变是系列最"女性化/时尚"的——"渐变模板的复用价值"。

七、我的页的交互细节与设计分析

7.1 菜单的"功能地图"角色

5 菜单覆盖 App 28 的全部功能域：记录（穿搭记录）、收藏（收藏搭配）、管理（衣物分类）、偏好（天气偏好）、系统（设置）——"菜单 = 产品的功能目录"——用户从我的页能到达所有功能——"个人中心的导航价值"。

7.2 渐变卡的"半透明"细节

#33FFFFFF 半透明白头像底——品红渐变透过半透明圆——"通透感"——与 App 26/27 完全同款——"系列半透明技法的一致性"——"渐变卡 + 半透明 = 系列个人中心的视觉签名"。

7.3 统计与首页的"双统计"

首页 StatGrid（4 宫格）+ 我的页 StatRow（悬浮卡）——"同一批数据两种形态"：

• 首页：独立小卡 + 品红数值（亮点展示）
• 我的页：连体大卡 + 深色数值（汇总报表）

"同数据、双形态 = 页面角色的差异"——"首页要'抢眼'、我的页要'稳重'"——"设计形态服务页面角色"。

7.4 悬浮统计的"层次感"

渐变卡（最重）→ 悬浮统计（次重）→ 菜单（中）→ 关于（最轻）——"由重到轻的递减"——"视觉重量 = 信息优先级"——身份最重、信息最轻——"个人中心的视觉节奏"。

7.5 我的页的"品牌浓度"

品红在 App 28 的分布：首页渐变天气卡 + 衣橱 Chip/虚线 + 穿搭生成按钮/收藏红心 + 我的页渐变——"品红渗透每个 Tab"——"主题色的全 App 渗透 = 品牌一致性"——我的页渐变是品红的"最高浓度"。

7.6 系列个人中心的"品牌表达"

系列 4 个渐变个人中心：24 靛蓝（科研）/26 暖橙（AI PPT）/27 琥珀（提醒）/28 品红（衣橱）——"每个 App 的渐变 = 它的品牌色"——"个人中心是品牌色的最终归宿"——"渐变模板 + 品牌色 = 系列个人中心的公式"。

7.7 我的页的"数据叙事"

我的页数据讲了一个故事："你有 48 件衣服、12 套方案、收藏 5 套、记录 8 套"——"数据叙事 = 用户的自画像"：

• 48（衣物）——"衣橱规模"
• 12（方案）——"AI 产出"
• 5（收藏）——"你的品味"
• 8（记录）——"你的习惯"

"统计不只是一组数字，是用户的穿搭人生"——"好的个人中心用数据讲故事"。

八、我的页的代码与视觉分析

8.1 我的页的代码组织

我的页 4 个 @Builder（UserCard/StatRow/MenuList/About）——"一模块一 Builder"——与 App 26/27 完全同构——"系列个人中心的代码模板"——"复制即用的结构"——"模板复用的工程价值"。

8.2 渐变卡的三要素

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })：

• angle: 135——对角方向（动感）
• 起始品红 0%——品牌主色
• 终点粉 100%——品牌辅色

"角度 + 双色 + 位置的完整渐变语法"——"系列渐变模板的标准写法"——"一行代码的视觉升级"。

8.3 悬浮统计的数学

margin({ top: -24 }) + 渐变卡 padding({ bottom: 44 })——"44 - 24 = 20，渐变卡底部露 20"——"悬浮的数值是算出来的"——"设计的数学"——与 App 26/27 完全一致——"悬浮公式的系列恒定"。

8.4 统计卡 vs 首页宫格

位置	形态	数值色
首页	4 独立小卡	品红
我的页	1 连体大卡	深色

"同一批数据双形态"——"首页抢眼、我的页稳重"——"形态服务角色"。

8.5 菜单的 emoji 语义

📋（记录）/❤️（收藏）/👗（分类）/🌤️（天气）/⚙️（设置）——"每个 emoji 精确对应功能"——"emoji 图标学的应用"——❤️ 与穿搭页收藏符号一致——"跨页符号统一"。

8.6 我的页的"角色定位"

"穿搭达人" + "本周 5 套穿搭"——"用户是穿搭达人"——"个人中心的角色塑造"——用户看到"达人"标签获得身份认同——"身份认同 = 留存动机"——与 App 26"PPT 创作者"、App 27"时间管家"同手法。

8.7 个人中心的"标准四段式"

身份（渐变卡）+ 数据（统计）+ 入口（菜单）+ 信息（关于）——"个人中心的万能骨架"——"28 是标准四段式的纯粹呈现"——无多余模块、无缺失要素——"标准即最佳"。

8.8 与 App 27 我的页的对比

App 27 有推送开关（NotifyCard）、App 28 无——"核心设置的差异"：

• 27（提醒）：推送开关是核心 → 独立成卡
• 28（衣橱）：天气偏好已入菜单 → 无需独立

"特色模块的有无 = 业务核心设置的有无"——"个人中心为业务服务"。

8.9 我的页的"品牌收束"

品红在 App 28 的最后一站——首页渐变/衣橱 Chip/穿搭按钮/我的渐变——"全 App 的品红在我的页收束"——"个人中心 = 品牌色的终点站"——"从首页到我的，品红贯穿全程"。

8.10 我的页的扩展方向

• 统计接真实数据（衣橱/收藏/记录实时汇总）
• 菜单接真实页面
• 天气偏好接推荐算法
• 可加"身材数据"等衣橱特色设置

"标准四段式的真实化路径清晰"——"demo 把个人中心的骨架搭到最标准"。

8.11 统计数据的"跨页验证"

我的页统计与各页数据：

• 48 衣物 ↔ 衣橱页（6 件展示 + 更多隐藏）
• 12 方案 ↔ 穿搭页（4 条记录 + 更多）
• 5 收藏 ↔ 穿搭页 ❤️（2 实心 + 更多）
• 8 记录 ↔ 穿搭页（4 条展示 + 更多）

"统计是'全量'、页面展示是'样例'"——"demo 的量级设计"——"统计数字 > 页面展示数"——这符合真实产品（统计是全库、列表有分页）——"量级自洽 = 可信"。

8.12 菜单的"业务完整度"

5 菜单覆盖衣橱业务全域：记录（穿搭记录）、收藏（收藏搭配）、分类（衣物分类）、偏好（天气偏好）、系统（设置）——"菜单 = 业务的 5 个管理面"——"菜单设计 = 业务功能的清单化"——"好的菜单让用户看到产品能做什么"——demo 的菜单与首页/衣橱/穿搭三页功能一一对应——"菜单的功能地图性"。

8.13 渐变卡的"品牌对比"

品红渐变 vs 系列渐变：

• 24 靛蓝（科研）——冷静专业
• 26 暖橙（AI PPT）——创造活力
• 27 琥珀（提醒）——时间紧迫
• 28 品红（衣橱）——时尚温柔

"渐变色 = 品牌情绪"——"品红是系列最'女性化/时尚'的渐变"——"渐变模板 + 品牌色的组合拳"——"系列个人中心的色彩记忆点"。

8.14 个人中心的"三秒印象"

用户打开我的页 3 秒看到：

1. 品红渐变卡（穿搭达人）——"我的身份"
2. 悬浮统计（48/12/5/8）——"我的资产"
3. 5 菜单——"我能做什么"

"三秒建立完整认知"——"个人中心的信息架构效率"——身份 + 资产 + 功能一目了然——"标准四段式的效率"——"简单却完整"。

8.15 我的页的"可访问性"

• 白字在品红渐变上（高对比）✓
• 深字统计（清晰）✓
• 灰字辅助（不抢眼）✓
• 菜单行整行可点（大热区）✓

"个人中心的可访问性达标"——"身份/数据/功能的信息层级清楚"——"易读 + 易点"。

8.16 从我的页看 App 28 的完整闭环

首页（看天气穿搭）→ 衣橱（管衣物）→ 穿搭（生成收藏）→ 我的（看资产）——"我的页是闭环的终点站"——"所有数据在我的页汇总"——"个人中心 = 产品价值的沉淀处"——用户通过统计看到"用这个 App 的收获"——"从功能到价值的最后一站"。

8.17 用户卡的"副文案设计"

"本周 5 套穿搭"——"副文案 = 当下的状态"——"不是'累计 12 套'而是'本周 5 套'"——"近期的数字更有温度"——"本周 5 套"让人感觉"最近在用这个 App"，"累计 12 套"则偏冷——"副文案的时效性 = 亲近感"——"个人中心的文案温度"——与 App 27"本周 8 个事项待处理"同款"本周"表达——"系列副文案的'本周'共识"。

8.18 菜单的"天气偏好"

🌤️ 天气偏好菜单——"衣橱 App 的特色设置"——"为什么有天气偏好？"——穿搭推荐依赖天气（首页天气卡），天气偏好 = 推荐依据的设置（如"怕热/怕冷"）——"特色菜单 = 业务特色"——"菜单里藏着产品的业务逻辑"——天气偏好是 App 28 区别于系列其他 App 的特色菜单——"菜单的差异化"。

8.19 我的页的"节奏感"

从上到下的视觉节奏：渐变卡（重）→ 悬浮统计（次重）→ 菜单（中）→ 关于（轻）——"由重到轻的递减节奏"——"像音乐渐弱的尾声"——"视觉节奏 = 信息权重的曲线"——身份最重（先看）、信息最轻（最后）——"个人中心的阅读曲线"——demo 的四段式节奏平滑自然。

8.20 个人中心的"设计清单"

App 28 我的页的完整清单：

1. 渐变用户卡（品红 → 粉 + 半透明头像）✓
2. 悬浮统计（4 项 + 负边距）✓
3. 功能菜单（5 项 + Divider）✓
4. 关于/版本（产品名 + 版本号）✓
5. 安全区适配（safeTop/safeBottom）✓

"五要素齐全 = 标准个人中心"——"28 是系列个人中心的'规范样本'"——"标准即最佳"。

8.21 我的页的"半透明元素"

#33FFFFFF 半透明白头像底——"渐变卡上的通透细节"——品红渐变透过 20% 白圆——"半透明的三层作用"：让渐变可见（通透）、让头像立体（浮起）、让视觉柔和（不突兀）——"半透明 = 系列个人中心的签名技法"——26/27/28 三连用——"技法的一致性"。

8.22 统计的"四维数据"

48/12/5/8 的四维统计——"衣橱资产的四个视角"：规模（衣物总数）、产出（穿搭方案）、品味（收藏搭配）、习惯（穿搭记录）——"四维 = 资产的立体画像"——"统计维度设计 = 产品想突出的价值"——App 28 突出"衣橱规模 + AI 产出 + 用户品味"——"统计即价值观"。

8.23 个人中心的"设计哲学"

App 28 我的页体现的 3 个设计哲学：

1. 模板复用——系列个人中心的代码/结构直接复用
2. 品牌收束——品红渐变为全 App 色彩画句号
3. 标准之美——无多余模块、无缺失要素

"标准四段式做到极致也是特色"——"复用不是偷懒，是设计系统"——"28 的个人中心是系列模板的规范样本"。

8.24 我的页的"系列坐标"

我的页在 App 28 的位置：首页（看）→ 衣橱（管）→ 穿搭（穿）→ 我的（览）——"览"是个人中心的角色——"个人中心 = 全 App 数据的汇总 + 功能的总目录"——"收束一切的地方"——穿搭达人身份、衣橱资产、功能入口、版本信息全部在此——"个人中心的收束价值"。

8.25 从 App 28 看"系列设计系统"

App 28 是系列设计系统的又一次实践：C/D 主题类（统一色板/尺寸）、4 Tab 骨架（统一导航）、双行 Header（统一品牌区）、渐变用户卡（统一个人中心）、虚线卡（统一添加入口）、真交互收藏（统一品质底线）——"27 个 App 共用一套设计语言"——"设计系统的终极价值：每个 App 都'像一家人'"——"系列的力量"。

九、总结：品红渐变用户卡的个人中心设计

App 28 我的页一句话：用品红渐变（#BE185D → #F472B6）包装一个"身份 + 数据 + 入口"的个人中心——顶部渐变用户卡（穿搭达人）彰显时尚达人定位，悬浮统计展示衣橱四维数据，5 菜单聚合穿搭/衣物/天气功能入口，关于区收尾。

3 个设计亮点：

1. 品红渐变用户卡——135° 对角渐变 + 半透明 👗 头像，"穿搭达人"定位清晰
2. 悬浮统计——margin:-24 让统计卡叠上渐变，92% 宽白卡浮在品红上
3. 数据跨页自洽——48/12/5/8 与首页统计、穿搭收藏、衣橱数据互相呼应

主题色设计逻辑：品红 = 时尚/衣橱——"个人中心渐变品红，暗示'你的穿搭品位在发光'"——与首页渐变、穿搭收藏同色系——"品红在 App 28 全程统一"。

与系列呼应：渐变卡（26/27）、悬浮统计（26/27）、菜单 + Divider（系列标准）、#33FFFFFF 半透明（26/27）——"28 的个人中心 = 系列标准四段式的完整呈现"——"28 无特色模块，但把标准做到最纯"。

体验细节：副文案与统计同数、菜单 emoji 跨页统一、版本号与工程一致、由重到轻的视觉节奏——"个人中心的'标准美'"——该有的全有、没有多余。

可扩展性展望：统计接真实数据（衣橱/收藏/记录实时汇总）、菜单接真实页面、天气偏好接推荐算法——"demo 的标准四段式有清晰的真实化路径"。 我的页的衣物总数、穿搭方案与穿搭记录的统计让穿搭管理清晰可见，本文解析至此完整收尾。