鸿蒙原生应用 ArkUI 实战：活动相册我的页 —— 四列悬浮统计卡与负 margin 上浮手法

App 40「校园活动照片」我的页（ProfileTab），主题色 #6C5CE7 紫色（violet），4 个 Tab 分别为首页（📸）、活动（🎉）、上传（📤）、我的（👤）。我的页采用"UserCard + 统计行 + 菜单 + 关于"四区布局——紫色渐变 UserCard（📸 64×64 半透明头像 + "校园摄影师"18 号加粗 + "上传 96 张 · 获赞 234"） + 四列悬浮统计卡（96 我的照片 / 12 参与活动 / 234 获赞 / 18 收藏，负 margin 上浮叠在渐变区下缘） + 5 行菜单（🖼️ 我的照片 / ⭐ 我的收藏 / 🎊 活动记录 / ⬇️ 下载记录 / ⚙️ 设置，Divider 分隔 + ">" 箭头） + 底部关于区（校园活动照片共享 Version 1.0.0）。本篇基于 40-event-photo/entry/src/main/ets/pages/ProfileTab.ets（共 101 行）逐段拆解，附 4 张实机截图。

一、整体结构：四区"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 块结构：

1. UserCard — 渐变品牌区，展示身份与核心数据摘要
2. StatRow — 四列统计卡，负 margin 悬浮在渐变区下缘（本页比 App 39 多一列）
3. MenuList — 5 行功能菜单，收纳个人中心入口
4. About — 底部版本信息收尾

整个页面只有一个 Scroll，无顶部固定 Header，渐变 UserCard 即"头图"——与 App 39 我的页同款范式，但主题色从粉色换为紫色、统计从三列扩为四列。

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

二、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('上传 96 张 · 获赞 234').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({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) 从主题紫 #6C5CE7 到浅紫 #9B8AF5——与首页 Banner 同款渐变，品牌视觉统一。
2. 半透明头像底：64×64 圆形、#33FFFFFF（约 20% 透明度）白底 + 32 号 📸 emoji。📸 既是 Tab 图标也是头像，还是产品核心动作（拍照），品牌符号三合一。
3. 双行身份信息："校园摄影师"18 号加粗 + "上传 96 张 · 获赞 234"12 号 85% 透明度——昵称 + 数据摘要。
4. 底部 44 padding：为悬浮统计卡预留视觉空间。
5. 安全区：顶部 safeTop + 30 把渐变区推到状态栏下。

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

统计数据（15-20 行）：96 我的照片 / 12 参与活动 / 234 获赞 / 18 收藏——四个指标比 App 39 的三列多一列"获赞/收藏"维度，符合照片社区"作品量 + 活跃度 + 认可度"的数据模型。

技术要点：

1. 负 margin 悬浮：.margin({ top: -24 }) 上移 24 像素，叠加在 UserCard 底部预留的 44 空白上，形成悬浮层次感——与 App 39 完全同款手法，是系列"头图 + 悬浮卡"范式的延续。
2. 四列等分：四个 Column 各加 layoutWeight(1)，Row 无间距自动四等分——比三列更挤一些，所以数字字号保持 18 号、标签 11 号，信息不过载。
3. 92% 宽度自居中：左右各留 4% 呼吸边距。
4. key 用 label：ForEach 以 s.label 为 key（我的照片/参与活动/获赞/收藏，天然唯一）。

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

5 个菜单项（22-28 行）：🖼️ 我的照片 / ⭐ 我的收藏 / 🎊 活动记录 / ⬇️ 下载记录 / ⚙️ 设置。

实现细节：

1. 三栏行：emoji（18 号）+ 标题（14 号，layoutWeight(1) 占满中段）+ ">" 箭头（浅灰）。
2. ForEach 的 index 参数：idx < this.menus.length - 1 时渲染 Divider（0.5 宽浅灰细线），最后一行无分隔线——列表收尾惯例。
3. 菜单语义：前两项（我的照片/我的收藏）是"作品管理"、中间两项（活动记录/下载记录）是"历史轨迹"、最后一项（设置）是"系统配置"——5 个入口恰好覆盖照片社区个人中心的核心功能域。
4. 整行可点：点击 Toast 菜单名，热区大。
5. 间距：margin({ top: 16 }) 与统计卡保持 16 间距（App 39 为 14，微调营造呼吸感）。

五、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 号更浅版本号，margin({ top: 24 }) 与菜单卡拉开距离。版本号 opacity(0.7) 进一步弱化——"版本信息越低调越好"的惯例，真实应用点击版本号常隐藏"检查更新"等彩蛋。

六、跨页数据自洽：我的页 = 照片社区数据总汇

我的页每个数字都能在其他页面找到出处：

• "96 我的照片" ↔ 上传页的"选择照片 (3/9)"：96 是历史累计上传量，本次会话再传 3 张即 99——"上传 → 我的"闭环。
• "12 参与活动" ↔ 首页 Banner"已收录 12 场活动"——用户参与的活动数 = 平台活动总数（Demo 简化设定，寓意"用户参与了全部活动"）。
• "234 获赞 / 18 收藏" ↔ 照片社区的互动指标，首页/活动页未直接展示，是个人维度独有。
• "🎊 活动记录"菜单 ↔ 活动页 4 个活动 + 分段"进行中/已结束"——活动记录即参与历史的入口。
• "⬇️ 下载记录"菜单 ↔ 照片共享场景的下载动作（用户下载过哪些照片）——照片社区的内容消费闭环。

七、实机截图与交互演示

本节结合 4 张实机截图，逐张还原我的页的视觉效果与交互过程。

1. 我的页首屏：渐变头图 + 四列统计

第一张截图是我的页默认首屏：顶部紫色渐变 UserCard——📸 半透明圆形头像、右侧"校园摄影师"加粗白字与"上传 96 张 · 获赞 234"；下方白色统计卡以负边距悬浮在渐变区下缘，四列数字（96 我的照片 / 12 参与活动 / 234 获赞 / 18 收藏）等分排布；再往下是第一、二行菜单（🖼️ 我的照片 / ⭐ 我的收藏）。整页紫色渐变 + 白卡悬浮的层次感与 App 39 粉色版同构但色调不同。

2. 点击"我的收藏"：弹出 Toast

第二张截图是点击菜单第二行"⭐ 我的收藏"后的反馈：弹出"我的收藏"Toast。菜单行整行可点（emoji、标题、箭头任意位置均触发），Divider 细线在行间清晰可见，第一行与第二行之间的分隔完整。

3. 点击"下载记录"：弹出 Toast

第三张截图是点击菜单第四行"⬇️ 下载记录"后的反馈：弹出"下载记录"Toast。"下载记录"是照片共享类 App 特有的菜单项（记录用户下载/保存过的照片），与"我的照片"（上传的）形成"上传 vs 下载"的双向内容轨迹，产品语义完整。

4. 完整视图：5 菜单 + 版本信息

第四张截图是我的页完整视图：五个菜单（🖼️ 我的照片 / ⭐ 我的收藏 / 🎊 活动记录 / ⬇️ 下载记录 / ⚙️ 设置）全部可见，最后一行"⚙️ 设置"后无 Divider 分隔，最底部是"校园活动照片共享 / Version 1.0.0"。从渐变头图到版本号，四区块在单屏内完整呈现，无需滚动即可纵览个人中心全部功能入口。

八、扩展思考：照片社区个人中心的专属设计

与通用个人中心相比，照片社区（相册类）的"我的页"有独特的扩展空间：

1. 照片墙入口：菜单"我的照片"点开应是用户上传照片的瀑布流/九宫格墙（复用首页 Waterfall 布局），支持按时间线或活动筛选——个人作品集是照片社区的核心资产展示。
2. 数据指标语义：96 我的照片（作品量）、234 获赞（认可度）、18 收藏（传播度）、12 参与活动（活跃度）——四指标构成"创作者画像"，比通用 App 的"等级/积分"更有内容社区味道。
3. 下载记录的合规：记录用户下载的照片（来源相册、下载时间），需考虑版权与二次传播的提示——照片共享场景特有的合规细节。
4. 创作激励：获赞达到阈值可触发"创作者等级"成长体系（如"随手拍 → 校园摄影师 → 摄影达人"），与 UserCard 昵称"校园摄影师"呼应——昵称不是随意取的，是等级体系的映射。

九、常见问题与开发避坑

1. 四列统计的拥挤风险：四列 layoutWeight 等分后每列约 1/4 屏宽，若数字位数多（如"1234"）会挤压标签——建议数字超过 3 位时缩写（1.2k）或缩小字号，本页 96/12/234/18 均在安全范围。
2. 负 margin 与裁剪：统计卡 margin({ top: -24 }) 上浮，若父级 Scroll 设置了 clip 或圆角容器裁切，悬浮效果可能被裁掉一部分——保持父容器不裁切或预留足够内边距。
3. 菜单点击与 Divider 的命中区域：Divider 是独立节点，点击 Divider 行本身无事件（它夹在两行之间）——用户点中分隔线不会有反馈，属可接受行为，但若要求"整卡可点"，可把 Divider 收进行的上下内边距区域。
4. 四列 vs 三列的视觉平衡：四列更"满"，需要更小的间距与字号适配；若后续统计增到 5 项，建议改为"2×3 网格"而非单行五列，避免过挤。
5. 版本号彩蛋：若要在版本号上挂"检查更新"，需给 Text 加 onClick，且连续点击多次触发隐藏功能——注意不要与整页点击手势冲突。

十、扩展思考：创作者成长体系设计

我的页 UserCard 的昵称"校园摄影师"暗含等级概念，展开来看是一套完整的创作者成长体系：

1. 等级阶梯：随手拍 → 校园摄影师 → 摄影达人 → 校园名人 四级——昵称"校园摄影师"对应第二级，暗示用户已上传 96 张、获赞 234 的积累。
2. 升级规则：按"上传照片数 + 获赞数 + 收藏数"加权积分升级，如"每张照片 2 分 + 每赞 1 分"，达到阈值自动升级并更新 UserCard 昵称与头图样式（如等级徽章角标）——数字统计（96/234/18）即积分的可视化。
3. 激励反馈：升级时弹窗庆祝 + 解锁专属权益（更高压缩画质、优先推荐曝光、专属头像框）——把统计页变成"成长页"，驱动用户持续上传。
4. 排行榜：在首页 Banner 下方或新增 Tab 展示"本周上传之星"排行榜（复用瀑布流卡片）——社交比较是 UGC 社区的核心引擎。
5. 与活动联动：参与活动（我的页 12 参与活动）可获"活动徽章"，集齐 N 枚解锁称号——活动参与度也成为成长体系的一维，闭环更完整。

十一、扩展思考：照片社区的隐私与版权合规

照片共享涉及大量敏感数据，从我的页"下载记录""隐私"角度展开合规设计：

1. 照片授权：他人照片的下载/保存需获得上传者授权（App 内授权协议），"下载记录"应记录下载来源与授权状态——未经授权下载是侵权风险点。
2. 人脸信息：活动照片含大量人脸，属敏感个人信息——上传时应默认打码/模糊非本人人脸，或仅校内网可见，遵循最小化原则。
3. 删除权：用户可删除自己的照片（我的页"我的照片"提供删除入口），删除后关联相册 count 同步减少、缩略图缓存清理——"被遗忘权"是合规底线。
4. 内容审核：UGC 图片应过 AI 审核（涉黄/暴恐/广告），违规自动下架并通知上传者——上传链路中增加审核状态字段。
5. 下载追踪：每张照片的下载记录（谁在何时下载了哪张）可在创作者端展示——既防滥用也满足创作者知情权，我的页"下载记录"从"我的下载"扩展为"谁下载了我的照片"双向视角。

十二、系列横向对比：个人中心的数据模型差异

我的页是全 App 数据总汇，不同 App 的个人中心因产品定位不同，统计数据模型也各具特色：

维度	App 40 照片	App 39 兴趣	App 37 资料	App 34 打印
核心指标	96 照片/234 赞/18 收藏	5 标签/24 匹配/18 好友	阅读量/书签	上传量/分享量
昵称	校园摄影师	兴趣探索者	学习达人	打印达人
菜单侧重	作品+记录+设置	标签+历史+设置	书架+笔记+设置	资料+订单+设置
头像符号	📸 相机	💖 爱心	📚 书本	🖨️ 打印机

可以看出，每个 App 的昵称、统计、菜单都围绕其核心业务定制：照片社区统计"作品与认可"（照片/赞/收藏）、兴趣社交统计"人脉与画像"（标签/匹配/好友）、资料库统计"学习沉淀"（阅读/书签）。而四列 vs 三列统计的差异，本质是业务维度多寡的映射——照片社区的创作者画像天然比兴趣社交多"获赞"这一维。

同时注意四者都复用了"渐变 UserCard + 负边距悬浮统计 + 菜单卡 + 版本号"的统一骨架——骨架 90% 相同、数据 100% 定制，这正是本系列"一 App 一主题"方法论在个人中心的集中体现：把品牌色、指标项、菜单项换成业务数据，一个高完成度的个人中心即刻成型。若未来把四个 App 合并成"校园生活超级 App"，每个业务的个人中心数据（照片 96 张/兴趣 5 个/笔记 N 篇）可以聚合进同一个"我的"页，形成更丰富的个人数据看板——这是批量 Demo 的终极价值。

十三、开发者视角：个人中心页的调试与回归技巧

1. 四列布局的适配回归：四列 layoutWeight 在小屏设备上会变窄，数字"234"与标签"我的照片"可能挤压——回归测试用最小支持宽度设备跑一遍，必要时把数字字号降为 16 或改 2×2 网格。
2. 负 margin 的机型差异：margin({ top: -24 }) 的悬浮效果在部分机型上可能与渐变区边缘差 1-2 像素（渲染取整差异）——视觉可接受，若要求像素级统一，可用 Stack 绝对定位替代负 margin。
3. 菜单扩展的 key 风险：菜单数组未来若新增项，m.title 作 key 需保证唯一——"我的照片"与"我的收藏"前缀相似但不重复，暂无风险；新增"我的照片设置"这类含重复词的新项时要改用 id。
4. 数据自洽的验收：个人中心的数字（96/12/234/18）与各页数据一致性是本系列的核心验收项——修改任意页数据后，务必逐页核对统计是否同步，可用自动化脚本遍历页面截图比对数字。
5. 渐变头的加载：linearGradient 是纯渲染无网络开销，但若将来换成图片头图，需加占位底色与加载态——渐变方案在性能上仍是个人中心头图的最优解。

十四、FAQ 与一句话总结

Q1：为什么统计是四列而不是三列？ 照片社区的数据维度天然多于通用社交（作品量/参与量/获赞/收藏四维），四列单行信息密度高且一屏可容；若再增加维度，可改 2×3 网格。

Q2："96 我的照片"和上传页"3 张"什么关系？ 96 是历史累计，上传页的 3 是本次会话待上传数——一次完整操作后应变为 99。Demo 静态展示两处数字，产品化后由同一数据源驱动。

Q3："下载记录"为什么是照片社区专属？ 因为产品的核心动作是"上传照片供他人查看/下载"，下载记录即内容消费轨迹，与"我的照片"（内容生产）相对，构成完整的内容闭环。

Q4：菜单为什么是 5 个而不是更多？ 5 个覆盖"作品/收藏/记录/下载/设置"五大功能域，恰好一屏收起。功能超过 7 个时应分组（如"我的""通用"两段）或用二级页面收纳。

Q5：头像为什么是 📸 而不是用户照片？ emoji 头像零成本且与产品定位（摄影/照片）强关联；📸 同时是 Tab 图标与产品符号，三处复用强化品牌记忆。产品化后替换为 Image 上传头像，容器结构不变。

一句话总结：我的页以 101 行代码完成照片社区个人中心的完整范式：紫色渐变头图定品牌调性、四列悬浮统计亮创作者画像、5 行菜单收纳功能入口、版本号低调收尾。"头图 + 悬浮卡 + 菜单"三件套结构，负 margin 悬浮与 layoutWeight 四等分是核心技巧。

从验收视角再补一笔：四张实机截图覆盖了首屏（渐变头图 + 四列统计 + 菜单）、菜单点击（我的收藏 Toast）、第二处菜单点击（下载记录 Toast）、完整视图（5 菜单 + 版本号）四个状态，证明负 margin 悬浮、四列等分、菜单整行点击、Divider 条件渲染四项核心实现均正常。"96 我的照片、12 参与活动"等数字均能对应到本页数据，个人中心作为数据总汇页，其验收标准天然就是"每个数字都能找到出处"，本页交出了满分答卷。 整体而言，本页以四区范式收纳了创作者的全部数据与入口，配合四张实机截图的完整验证，为照片社区个人中心提供了标准参考。