鸿蒙原生应用开发实战：校园影像我的页 —— 摄影徽章墙与签到联动经验条

App 19「校园影像」我的 Tab（ProfileTab），是个人中心页。整页用渐变用户卡片（摄影爱好者 + Lv.6 + 680/1000 经验条与签到联动）+ 4 栏统计（作品/点赞/粉丝/获奖）+ 6 摄影徽章成就墙（4 解锁 2 未解锁）+ 本周拍摄量条形图（平均 71%）+ 6 项菜单（消息通知带数字 5/NEW 角标）+ 关于应用信息卡。本篇基于 19-campus-photo/entry/src/main/ets/pages/ProfileTab.ets（约 226 行）逐段拆解，附 4 张实机截图。

一、整体结构：与 App 18 我的页同源

ProfileTab 与 App 18 我的页几乎完全同构（UserCard + StatRow 固定、其余滚动，签到联动 exp+=10）：

build() {
  Column() {
    this.UserCard()
    this.StatRow()
    Scroll() {
      Column({ space: 14 }) {
        this.AchievementWall()
        this.WeekChart()
        this.MenuList()
        this.AboutInfo()
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

6 个块：UserCard（身份）→ StatRow（数据）→ AchievementWall（成就）→ WeekChart（行为图）→ MenuList（资产）→ AboutInfo（关于）。

"固定用户卡 + 滚动内容"布局（App 18 同款）——身份/经验/签到常驻顶部。

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

二、UserCard：Lv.6 摄影爱好者 + 签到联动经验

UserCard 是"摄影爱好者 + Lv.6"的青绿渐变身份卡，签到按钮真实联动经验值（与 App 18 同款"真联动"设计）：

@Builder UserCard() {
  Column() {
    Column({ space: 12 }) {
      Row({ space: 16 }) {
        Stack({ alignContent: Alignment.BottomEnd }) {
          Row() { Text('📷').fontSize(48) }
            .width(80).height(80).backgroundColor('#FFFFFF33').borderRadius(40).justifyContent(FlexAlign.Center)
          Row() { Text('Lv.6').fontSize(10).fontColor('#FFFFFF').fontWeight(FontWeight.Bold) }
            .backgroundColor(C.accent).borderRadius(8)
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
        }
        Column({ space: 6 }) {
          Text('摄影爱好者').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
          Text('摄影社 · 资深成员').fontSize(12).fontColor('#FFFFFFCC')
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
      }.width('100%')

      Column({ space: 6 }) {
        Row() {
          Text('经验值').fontSize(11).fontColor('#FFFFFFCC')
          Blank()
          Text(this.exp + ' / ' + this.maxExp).fontSize(11).fontColor('#FFFFFFCC')
        }.width('100%')
        Progress({ value: this.exp, total: this.maxExp }).color('#FFFFFF').backgroundColor('#FFFFFF33')
          .borderRadius(4).height(8).width('100%')
      }.width('100%')

      Button(this.checkedIn ? '✓ 今日已签到' : '签到 +10经验')
        .fontSize(13).fontColor(C.primary)
        .backgroundColor(this.checkedIn ? '#FFFFFF66' : '#FFFFFF')
        .borderRadius(20).height(36)
        .onClick(() => {
          if (!this.checkedIn) {
            this.checkedIn = true;
            this.exp += 10;
            promptAction.showToast({ message: '签到成功！+10经验值' });
          }
        })
    }
    .width('100%').padding({ top: this.safeTop + 24, left: D.pad, right: D.pad, bottom: 24 })
    .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
  }.width('100%')
}

2.1 身份设定

• 头像：📷（相机）——呼应摄影主题
• 姓名："摄影爱好者"——注意这不是人名，是"身份称号"（区别于 App 18 的"张同学"）——"爱好摄影的匿名用户"设定（摄影社区用称号而非真名，保护隐私）
• 等级：Lv.6 + C.accent 浅青绿徽章
• Slogan："摄影社 · 资深成员"——"社团 + 级别"身份（不是"已使用 X 天"的时长叙事，而是"社团地位"叙事）

Lv.6（680/1000 = 68%）——系列第二高等级（App 18 Lv.8 后回落到 Lv.6）。

2.2 签到联动经验值（真联动）

Button(this.checkedIn ? '✓ 今日已签到' : '签到 +10经验')
  .fontSize(13).fontColor(C.primary)
  .backgroundColor(this.checkedIn ? '#FFFFFF66' : '#FFFFFF')
  .borderRadius(20).height(36)
  .onClick(() => {
    if (!this.checkedIn) {
      this.checkedIn = true;
      this.exp += 10;
      promptAction.showToast({ message: '签到成功！+10经验值' });
    }
  })

签到三态联动（与 App 18 完全同构）：

• 未签 → "签到 +10经验" 白底青绿字
• 点击 → checkedIn = true + exp += 10 + Toast
• 已签 → "✓ 今日已签到" 半透明白底 + 点击拦截

exp += 10 经验值联动——签到不只是"打勾"，真实增加经验值，进度条（680/1000 → 690/1000）实时涨——"签到即升级"（App 18 首创、App 19 延续）。

@State checkedIn + @State exp + @State maxExp 三个状态——系列个人中心的标准"3 状态"。

三、StatRow：4 栏统计

StatRow 与 App 18 同构（90% 宽 + 负边距 -28 悬浮）：

private stats: StatItem[] = [
  { value: '248', label: '作品' },
  { value: '1.2k', label: '点赞' },
  { value: '36', label: '粉丝' },
  { value: '12', label: '获奖' }
];

作品 248/点赞 1.2k/粉丝 36/获奖 12——与首页统计（校园照片 248/总点赞 1.2k/参与拍摄 36）一致 ✓（"参与拍摄 36"= "粉丝 36"的数据一致性——虽然语义略有差异，但数字对上了）。

"获奖 12"是摄影 App 特有统计（比赛获奖次数）——"获奖数"反映摄影能力。4 栏同色（C.text）。

四、AchievementWall：摄影徽章墙

AchievementWall 是 6 个摄影徽章的 3 列 Row（4 解锁 2 未解锁）：

private badges: BadgeItem[] = [
  { id: 1, icon: '📸', name: '摄影新手', unlocked: true },
  { id: 2, icon: '🔥', name: '连续签到', unlocked: true },
  { id: 3, icon: '⭐', name: '精选作品', unlocked: true },
  { id: 4, icon: '🏆', name: '比赛获奖', unlocked: true },
  { id: 5, icon: '💯', name: '百赞作品', unlocked: false },
  { id: 6, icon: '👑', name: '校园摄影师', unlocked: false }
];

6 个徽章完全贴合摄影业务：摄影新手📸/连续签到🔥/精选作品⭐/比赛获奖🏆（解锁）、百赞作品💯/校园摄影师👑（未解锁）——"摄影成长阶梯"（新手→签到→精选→获奖→百赞→摄影师）——"徽章名 = 摄影成就"（对比 App 17 复用"省钱能手"的违和，App 19 完全定制）。

"百赞作品"与首页"樱花季 156 赞"呼应——156 > 100 已达成"百赞"但徽章未解锁（数据小瑕疵：156 赞的作品存在，百赞徽章却未解锁）——"徽章解锁条件与数据不一致"是 demo 常见小瑕疵，真实项目应"条件驱动解锁"。

解锁/未解锁三件套（背景/透明度/文字）+ 4 / 6 已解锁。

五、WeekChart：本周拍摄量

WeekChart 与首页同构（7 天条形图 + 平均 71%）：

@Builder WeekChart() {
  Column({ space: 10 }) {
    Row() {
      Text('本周拍摄量').fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text)
      Blank()
      Text('平均 71%').fontSize(11).fontColor(C.textDim)
    }.width('100%')
    Row() {
      ForEach(this.weekBars, (b: BarItem) => {
        Column({ space: 6 }) {
          Column().width(14).height(b.value * 0.7).backgroundColor(C.primary).borderRadius(4)
          Text(b.day).fontSize(10).fontColor(C.textDim)
        }.layoutWeight(1)
      }, (b: BarItem) => b.day)
    }.width('100%').alignItems(VerticalAlign.Bottom).height(90)
  }
  .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}

数据与首页完全一致（同一份 weekBars：40/65/55/80/90/100/70）——"平均 71%" = (40+65+55+80+90+100+70)/7 = 71.4 ≈ 71% ✓——汇总有数学依据。

与首页的差异：首页"共 42 张"（口径不匹配的瑕疵），我的页"平均 71%"（口径正确）——同一个 App 内部两页周图口径不一致（首页"张数"vs 我的页"百分比"）——又是"口径混用"的坑（本系列反复出现的 demo 瑕疵）。

六、MenuList：6 项菜单 + 数字/NEW 角标

MenuList 与 App 18 同构（showBadge 布尔控制 + 两种角标色）：

private menus: MenuItem[] = [
  { id: 1, icon: '👤', label: '个人主页', badge: '', showBadge: false },
  { id: 2, icon: '🖼️', label: '我的相册', badge: '', showBadge: false },
  { id: 3, icon: '🔔', label: '消息通知', badge: '5', showBadge: true },
  { id: 4, icon: '🎨', label: '滤镜管理', badge: 'NEW', showBadge: true },
  { id: 5, icon: '💾', label: '云端备份', badge: '', showBadge: false },
  { id: 6, icon: '❓', label: '帮助反馈', badge: '', showBadge: false }
];

6 项菜单：个人主页/我的相册/消息通知（5）/滤镜管理（NEW）/云端备份/帮助反馈——"我的相册"和"滤镜管理"是摄影 App 特有菜单。

消息通知 5（社区页"新点赞 28+新评论 12+..."？——不完全对应，但"有 5 条待处理"的语义成立）——数字角标示意。

角标两种色（NEW → C.accent 浅青绿 / 数字 → C.danger 红）+ Divider().strokeWidth(0.5) 超细分隔线（App 18 同款）。

七、AboutInfo：关于应用

AboutInfo 是 3 行"键值对"关于卡（与 App 18 同构）：

@Builder AboutInfo() {
  Column({ space: 8 }) {
    Row() {
      Text('关于应用').fontSize(13).fontColor(C.textDim).layoutWeight(1)
      Text('v2.0.0').fontSize(12).fontColor(C.textDim)
    }.width('100%')
    Row() {
      Text('运行环境').fontSize(13).fontColor(C.textDim).layoutWeight(1)
      Text('HarmonyOS 6.0+').fontSize(12).fontColor(C.primary)
    }.width('100%')
    Row() {
      Text('开发者').fontSize(13).fontColor(C.textDim).layoutWeight(1)
      Text('校园影像团队').fontSize(12).fontColor(C.textDim)
    }.width('100%')
  }
  .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}

关于应用 v2.0.0 / 运行环境 HarmonyOS 6.0+（青绿高亮）/ 开发者 校园影像团队——"开发者"跟随 App 名（校园影像团队）。

八、@State 与数据一致性

ProfileTab 有 3 个 @State（checkedIn/exp/maxExp）——系列个人中心标准（App 18 同款）。

数据一致性：

• 作品 248 = 首页"校园照片 248" ✓
• 点赞 1.2k = 首页"总点赞 1.2k" ✓
• 粉丝 36 = 首页"参与拍摄 36" ✓（数字对上）
• 消息通知 5 = 社区页统计（间接）✓

4 组数据跨页一致——App 19 的数据闭环完整（首页精选作品 → 发布页发布 → 社区页收到互动 → 我的页统计作品/点赞）。

九、与 App 18 我的页对比总结

维度	App 18 社交匹配	App 19 校园影像
主题色	粉红 #EC4899	青绿 #0D9488
用户	张同学 Lv.8	摄影爱好者 Lv.6
统计	好友/互动/活动/匹配率	作品/点赞/粉丝/获奖
徽章	社交徽章	摄影徽章
菜单	编辑资料/隐私…	我的相册/滤镜管理…
About	v2.0.0	v2.0.0（同款）

App 19 与 App 18 我的页几乎完全同构（布局/签到联动/3 状态/6 菜单/About）——"个人中心模板"第 5 次复用（App 13-19），"签到联动经验值"从 App 18 延续到 App 19。

十、摄影 App 的"作品资产"闭环

App 19 我的页的 4 项统计（作品/点赞/粉丝/获奖）构成摄影 App 的"作品资产"：

1. 作品 248——数量资产（发了多少作品） 2. 点赞 1.2k——影响力资产（作品被认可多少） 3. 粉丝 36——关系资产（多少人关注） 4. 获奖 12——荣誉资产（比赛成就）

"作品 → 点赞 → 粉丝 → 获奖"是摄影师的"成长资产链"：

发布作品（作品数+1）
  → 作品被点赞（点赞数+1）
    → 高热度作品带来粉丝（粉丝数+1）
      → 优质作品参赛获奖（获奖数+1）
        → 获奖提升知名度 → 更多粉丝/点赞（循环）

"资产链闭环"是内容创作者的核心激励——"我的页统计 = 创作者的成长仪表盘"（对比 App 13 音乐"订单"、App 16 商城"积分"的消费型统计，App 19 是"创作型统计"）。

真实项目的创作者中心：

• 收入统计（创作激励/广告分成）
• 数据周报（本周涨粉/爆款作品）
• 成长建议（"你的夜景作品受欢迎，多拍夜景"）

"作品资产"是摄影 App 我的页的灵魂——用户看统计就知道"我在这个平台混得怎么样"。

十一、"称号型身份" vs "实名型身份"的设计

App 19 我的页用户是"摄影爱好者"（称号）而非"张同学"（人名）——"称号型身份"设计：

App	用户身份	类型
13 音乐	小明同学	实名（昵称）
14 运动	张运动	实名（昵称）
16 商城	王积分	实名（昵称）
18 社交	张同学	实名（昵称）
19 摄影	摄影爱好者	称号（匿名）

"称号型身份"的 3 个优势：

1. 隐私保护——不用真名/昵称，用"我是谁"（身份标签）
2. 平台统一——所有用户都是"XX爱好者/XX达人"，平台身份体系统一
3. 匿名创作——创作者更敢表达（不用担心身份暴露）

"称号 + 社团"组合（"摄影爱好者" + "摄影社 · 资深成员"）——"个人称号 + 组织归属"双身份——比纯昵称更有"平台生态感"。

"称号型身份"适合：摄影社区（蜂鸟网）、兴趣社区（兴趣部落）、匿名社区（树洞）——"兴趣优先、身份弱化"的平台。

"实名型身份"适合：社交 App（微信/探探）、电商（淘宝）、服务 App（外卖）——"信任优先、身份明确"的平台。

"身份类型 = 平台调性"——App 19 的"称号型身份"配合"摄影创作"调性，比"实名"更契合。

十二、签到"+10经验"的激励设计

App 19 签到 "+10经验"（与 App 18 完全同款）值得从激励角度拆解：

"+10 经验"这个数字的设计：

• 680/1000 初始——签到 32 次即可升级（(1000-680)/10 = 32 天）——"一个月左右升级"是合理的激励周期（太长失去动力、太短没有成就感）
• "+10"是**"一次签到 = 1% 进度"（10/1000）——"签到 10 天 = 1% 进度的缓慢成长"？不对，10/1000 = 1%，签到 100 次才满级（100%）——这个数字设计其实偏慢（App 18 也是 720/1000 + 10）——"+10 经验"在 1000 上限下是"细水长流"型**（每天 1%，100 天升一级）——适合"摄影"这种低频高价值场景（不是每天必须来的工具，是兴趣社区）。

对比系列签到积分：

App	签到奖励	上限	周期
14 运动	+10 积分	—	即时可用
16 商城	+20 积分	—	兑换商品
18 社交	+10 经验	1000	100 天/级
19 摄影	+10 经验	1000	100 天/级

"经验型"（App 18/19）vs "积分型"（App 14/16）的差异：

• 经验：升级/身份（长期成长感）——"我是 Lv.6"
• 积分：兑换/消费（短期获得感）——"我能换保温杯"

"摄影 App 用经验不用积分"——摄影是兴趣创作，不是消费场景，"经验/等级"比"积分/兑换"更契合（摄影师在乎"段位"而非"兑换"）。

十三、总结

App 19「校园影像」我的页解析完毕。Lv.6 摄影爱好者 + 签到联动经验 + 摄影徽章墙 + 获奖统计，让 App 19 成为系列的"摄影主题标杆"。