鸿蒙原生应用 ArkUI 实战：渐变 UserCard + 负 margin 悬浮 —— 证件照我的页的个人中心架构

App 51「个人证件照制作」我的页（ProfileTab），主题色 #2D3436 深灰黑（charcoal），4 个 Tab 分别为首页（🪪）、拍摄（📷）、编辑（✂️）、我的（👤）。本篇基于 51-id-photo/entry/src/main/ets/pages/ProfileTab.ets（共 99 行）逐段拆解，附 4 张实机截图。

51 我的页首屏

一、整体结构：四区"UserCard + 统计 + 菜单 + 关于"布局

我的页是四个 @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 块结构：UserCard（深灰渐变品牌区）→ StatRow（三列悬浮统计卡）→ MenuList（5 行菜单）→ About（版本收尾）。与 App 45-50 我的页同构的"头图 + 悬浮卡 + 菜单 + 版本"范式——深灰主题、证件照业务指标、会员中心菜单是本页三大特色。

二、数据模型：统计 + 菜单

interface StatItem { value: string; label: string; }
interface MenuItem { id: number; emoji: string; title: string; }

private stats: StatItem[] = [
  { value: '28', label: '历史照片' },
  { value: '12', label: '导出记录' },
  { value: '5', label: '常用规格' }
];

private menus: MenuItem[] = [
  { id: 1, emoji: '🖼️', title: '历史照片' },
  { id: 2, emoji: '📐', title: '常用规格' },
  { id: 3, emoji: '⬇️', title: '导出记录' },
  { id: 4, emoji: '💎', title: '会员中心' },
  { id: 5, emoji: '⚙️', title: '设置' }
];

stats 三项贴合证件照业务：历史照片（制作量）、导出记录（导出量）、常用规格（规格偏好）——制作量 + 导出量 + 规格偏好是工具产品的数据模型。menus 5 项含"💎 会员中心"——系列工具类 App 首个商业化菜单。

三、UserCard：深灰渐变头图 + 🪪 证件头像

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('已制作 28 张证件照').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]] })
}

逐点拆解：

  1. 渐变头图：linearGradient 从 #2D3436 渐变到 #636E72——与首页 Banner 同款深灰渐变，品牌统一。
  2. 🪪 证件头像：64×64 半透明圆底（#33FFFFFF）+ 32 号 🪪——与 Tab 图标、首页 Banner 图标完全一致，🪪 即品牌符号。
  3. "证件照用户"：工具型产品的用户身份简单直接（对比社区产品的"达人/旅人"角色）——深灰专业感下无需花哨人设。
  4. 副标题："已制作 28 张证件照"——制作量与统计卡"28 历史照片"一致，副标题即制作成果。
  5. 底部 44 padding：为悬浮统计卡预留空间。

四、StatRow：三列悬浮统计卡

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

逐点拆解：

  1. 负 margin 悬浮：.margin({ top: -24 }) 上移叠加在渐变区下缘——系列标志性手法。
  2. 三列等分：三个 layoutWeight(1) 自动三等分，18 号数字 + 11 号标签。
  3. 92% 宽度：左右留 4% 呼吸边距。
  4. 数据自洽：28 历史照片 ↔ 副标题"已制作 28 张" ↔ 编辑页"保存到相册"累计；5 常用规格 ↔ 首页 6 规格中收藏 5 个。

五、MenuList：5 行菜单 + Divider 条件分隔

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

逐点拆解：

  1. 三栏行：emoji + 标题 + ">" 箭头——系列标准菜单卡。
  2. Divider 条件分隔：if (idx < this.menus.length - 1) ——最后一行不加 Divider。
  3. 整行点击：onClick 弹 Toast——前 3 个菜单对应统计卡三个数字（历史照片 ↔ 28、导出记录 ↔ 12、常用规格 ↔ 5）。
  4. "💎 会员中心"：工具产品的商业化入口——会员权益（高清导出/去水印/更多规格），对应编辑页"保存到相册"的增值服务（免费导出低清、会员高清）——freemium 模式（核心功能免费、增值收费）。

51 我的页会员中心 Toast

51 我的页常用规格 Toast

六、About：版本信息收尾

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 号浅灰应用名 + 11 号更浅版本号（opacity(0.7)），margin({ top: 24 }) 与菜单卡拉开距离——系列统一收尾。

七、跨页数据自洽：我的页 = 证件照用户档案

  { value: '28', label: '历史照片' },

      Text('已制作 28 张证件照').fontSize(12).fontColor('#FFFFFF').opacity(0.85)

数据自洽链：

  • "28 历史照片" ↔ 副标题"已制作 28 张证件照"（同一数字两处一致）↔ 编辑页"保存到相册"累计。
  • "5 常用规格" ↔ 首页 6 规格（收藏 5 个）——规格偏好的用户侧沉淀。
  • 🪪 符号 ↔ 首页 Banner（🪪）↔ Tab 图标（🪪）——品牌符号全 App 统一。
  • 深灰渐变 ↔ 首页 Banner/编辑页按钮——深灰主题全 App 统一。

八、系列横向对比：个人中心的菜单演进

App菜单数特色菜单商业化
App 45 签到墙4活动中心/积分商城积分体系
App 50 室友评价4评价记录/寝室资料无
App 51 证件照5💎 会员中心freemium

差异点：本页是系列工具类 App 中首个"商业化菜单"——"💎 会员中心"对应编辑页"保存到相册"的增值服务（免费导出低清、会员高清 4K）。工具产品的 freemium 模式：核心功能免费（制作证件照的基础：拍摄/换底/标准尺寸）、会员增值（高清导出/去水印/更多规格/排版）——痛点即付费点（证件照要清晰，高清导出是刚需）。

51 我的页完整视图

九、开发者视角：调试与验证技巧

  1. 负 margin 叠层：统计卡 margin({ top: -24 }) 悬浮，构建顺序（UserCard 先、StatRow 后）决定 StatRow 在上层——调整构建顺序需配合 zIndex。
  2. 统计数字跨页核对：28/12/5 与副标题（28 张）、编辑页保存累计、首页规格（6 中 5 收藏）的核对——"数字处处有出处"的系列验收标准。
  3. 🪪 符号全局统一：Tab 图标/首页 Banner/UserCard 头像三处 🪪——若改品牌符号需全局替换（常量管理），避免漏改。
  4. 菜单 key：当前 m.title 5 项内唯一——新增菜单项建议改用 m.id 作 key，为扩展预留。
  5. 会员菜单权限：Demo Toast——产品化后会员状态（是否开通）驱动菜单显示（未开通显示"开通会员"、已开通显示"会员中心"）。

十、演进方向

方向当前状态产品化演进
历史照片静态数字 28可重新编辑（跳编辑页回填背景/尺寸）
会员体系Toast"会员中心"会员状态驱动菜单显示 + 权益页
导出计费静态数字 12免费用户每月限次导出 + 会员无限
规格收藏静态数字 5首页规格卡加"⭐ 收藏" + 我的页管理
使用报表累计数字按月统计（本月制作 N 张）趋势图

十一、一句话总结

我的页以 99 行代码完成了证件照用户的使用档案——深灰渐变头图配 🪪 证件头像、"证件照用户"功能身份、"28 历史/12 导出/5 规格"工具使用数据、💎 会员中心商业化菜单（系列首个 freemium 入口）、5 菜单覆盖"照片/规格/导出/会员/设置"。工具使用档案 + 商业化入口是本页双核——记录使用 + 引导付费，让证件照工具的个人中心既沉淀资产又支撑变现。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

# ArkUI # 鸿蒙应用开发
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

旧图、插件、国产系统，中望CAD的兼容硬实力

avatar 人工智能6S服务平台
cover

兼容性挑大梁：这份CAD榜单让图纸迁移不再犯难

avatar 人工智能6S服务平台
cover

桥架、灯具、配电图，两款国产CAD横向比一比

avatar 人工智能6S服务平台