鸿蒙原生应用 ArkUI 声明式实战：纪念册我的页 —— 淡紫渐变卡与负 margin 悬浮统计行

一键难忘

134人浏览 · 2026-10-02 05:56:45

一键难忘 · 2026-10-02 05:56:45 发布

鸿蒙原生应用 ArkUI 声明式实战：纪念册我的页 —— 淡紫渐变卡与负 margin 悬浮统计行

App 44「校园纪念册」我的页（ProfileTab），主题色 #A29BFE 淡紫色（lavender），4 个 Tab 分别为首页（📔）、相册（📸）、留言（💬）、我的（👤）。我的页采用"UserCard + 统计行 + 菜单 + 关于"四区布局——淡紫渐变 UserCard（📔 64×64 半透明纪念册头像 + "青春记录者"18 号加粗 + "计科2022级 · 参与 4 本纪念册"） + 三列悬浮统计卡（86 我的照片 / 12 我的留言 / 4 纪念册，负 margin 上浮叠在渐变区下缘） + 5 行菜单（📷 我的照片 / 💬 我的留言 / 📔 我的纪念册 / 👥 同学录 / ⚙️ 设置，Divider 分隔 + ">" 箭头） + 底部关于区（校园纪念册 Version 1.0.0）。本篇基于 44-memorial-book/entry/src/main/ets/pages/ProfileTab.ets（共 100 行）逐段拆解，附 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 块结构：

UserCard — 淡紫渐变品牌区，展示青春记录者身份与班级归属
StatRow — 三列悬浮统计卡（86 我的照片 / 12 我的留言 / 4 纪念册）
MenuList — 5 行功能菜单（含"同学录"特色菜单）
About — 底部版本信息收尾

与 App 39-43 我的页完全同构的"头图 + 悬浮卡 + 菜单 + 版本"范式——主题色淡紫、统计数据换成纪念册业务指标（照片/留言/纪念册）、昵称换为"青春记录者"，骨架复用、数据定制的系列惯例延续。

项目源码开源：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('计科2022级 · 参与 4 本纪念册').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]] })
}

技术拆解：

渐变头图：linearGradient 从 #A29BFE 淡紫渐变到 #C4BEF5——系列中最"淡"的紫色，契合纪念册"温柔怀旧"的氛围（比 App 40/42 的紫更浅）。
📔 纪念册头像：64×64 半透明圆底 + 32 号 📔——与 Tab 图标（📔）、首页标题副文案（📔）、Banner 图标（📔）完全一致，纪念册符号全 App 统一，品牌记忆强。
昵称"青春记录者"：定位"记录者"——用户是青春的记录者（照片/留言都是记录），比"纪念册用户"更有使命感的角色命名。
副标题带班级："计科2022级 · 参与 4 本纪念册"——首次在个人中心展示班级身份（计科2022级），纪念册是集体产品，班级归属是身份的核心，副标题从"个人数据摘要"升级为"班级 + 参与规模"。
底部 44 padding + 安全区：为悬浮统计卡预留空间、顶部避让状态栏。

44 我的页首屏

三、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-19 行）：86 我的照片 / 12 我的留言 / 4 纪念册——三列，指标完全贴合纪念册业务："我的照片"（个人上传的照片）、"我的留言"（个人写的寄语）、"纪念册"（参与的册子数）——前两项是"我的贡献"、第三项是"我的圈子"，贡献 + 圈子的组合是集体产品的个人中心特色。

技术要点：

负 margin 悬浮：.margin({ top: -24 }) 上移叠加在渐变区下缘——系列标志性手法。
三列等分：三个 Column layoutWeight(1) 自动三等分，18 号数字 + 11 号标签。
92% 宽度：左右留 4% 呼吸边距。
key：s.label（我的照片/我的留言/纪念册，天然唯一）。

数据自洽：86 我的照片 ↔ 相册页照片（8 张展示 / 86 个人累计）、12 我的留言 ↔ 留言页寄语（3 条展示 / 12 个人累计）、4 纪念册 ↔ 首页 4 本纪念册 ↔ 副标题"参与 4 本纪念册"——四个数字全部有出处。

四、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 个菜单项（21-27 行）：📷 我的照片 / 💬 我的留言 / 📔 我的纪念册 / 👥 同学录 / ⚙️ 设置。

菜单语义分析：

📷 我的照片：个人上传的全部照片（跨纪念册聚合）——对应统计"86 我的照片"。
💬 我的留言：个人写的全部寄语——对应统计"12 我的留言"。
📔 我的纪念册：参与的纪念册列表——对应统计"4 纪念册"与首页 4 本。
👥 同学录：纪念册特色菜单——班级同学的通讯录（同学姓名/联系方式/头像），对应班级身份"计科2022级"，是纪念册"集体记忆"的成员清单。
⚙️ 设置：通知、隐私、关于等。

实现细节：三栏行（emoji + 标题 + ">"）、ForEach index 判断最后一行不加 Divider、整行可点 Toast、92% 宽卡片——系列标准菜单卡。前 3 个菜单恰好对应统计卡三个数字 + 首页纪念册，"同学录"是纪念册产品的专属入口。

五、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 }) 与菜单卡拉开距离——系列统一收尾。

六、跨页数据自洽：我的页 = 青春记录者档案

我的页每个元素都能在其他页面找到呼应：

"计科2022级" ↔ 首页第一本纪念册"计科2022级毕业纪念"——班级身份与纪念册主题一致，用户是计科2022级的成员。
"参与 4 本纪念册" ↔ 统计"4 纪念册" ↔ 首页 4 本纪念册——同一数字三处出现，完全自洽。
"86 我的照片 / 12 我的留言" ↔ 相册页照片（8 张）+ 留言页寄语（3 条）——统计是累计、页面是最近展示，量级关系合理。
"👥 同学录"菜单 ↔ 纪念册成员（45 人/38 人）——同学录是纪念册成员的通讯录。
📔 符号 ↔ Tab 图标、首页标题/Banner、UserCard 头像——纪念册符号全 App 统一。

七、实机截图与交互演示

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

1. 我的页首屏：淡紫渐变 + 三列统计

第一张截图是我的页默认首屏：顶部淡紫渐变 UserCard——📔 半透明纪念册头像、右侧"青春记录者"加粗白字与"计科2022级 · 参与 4 本纪念册"（班级身份首次出现在个人中心）；下方白色统计卡以负边距悬浮在渐变区下缘，三列数字（86 我的照片 / 12 我的留言 / 4 纪念册）等分排布；再往下是菜单第一、二行"📷 我的照片 / 💬 我的留言"。淡紫渐变温柔怀旧，班级身份的副标题是系列个人中心的首次。

2. 点击"我的纪念册"：弹出 Toast

第二张截图是点击菜单第三行"📔 我的纪念册"后的反馈：弹出"我的纪念册"Toast。菜单整行可点（emoji、标题、箭头任意位置均触发），"我的纪念册"对应首页 4 本纪念册——个人参与的册子在此集中查看。

3. 点击"同学录"：弹出 Toast

第三张截图是点击菜单第四行"👥 同学录"后的反馈：弹出"同学录"Toast。"同学录"是纪念册产品的特色菜单——班级同学的通讯录（对应"计科2022级"班级身份），是纪念册"集体记忆"的成员清单，也是系列其他 App 没有的专属入口。

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

第四张截图是我的页完整视图：五个菜单（📷 我的照片 / 💬 我的留言 / 📔 我的纪念册 / 👥 同学录 / ⚙️ 设置）全部可见，最后一行"⚙️ 设置"后无 Divider，最底部是"校园纪念册 / Version 1.0.0"。从渐变头图到版本号，四区块在单屏内完整呈现。

八、扩展思考：集体产品个人中心的身份设计

纪念册是"集体产品"，其个人中心与个人产品（相册/笔记）有本质差异：

班级身份前置：副标题"计科2022级"直接把班级身份放在个人中心首屏——因为纪念册是"以班级为单位"的集体记忆，用户首先是"计科2022级的一员"其次才是"个人"；这是集体产品个人中心的身份定位（个人产品强调"我的成就"，集体产品强调"我的归属"）。
贡献 vs 圈子：统计"86 照片 / 12 留言"是"我的贡献"（个人在集体中的投入）、"4 纪念册"是"我的圈子"（参与的集体）——贡献 + 圈子的双维度统计是集体产品个人中心的核心数据模型。
同学录的入口地位：同学录（成员通讯录）是纪念册的"关系资产"——它不是普通设置，而是与照片/留言并列的顶级菜单，因为"同学"是纪念册的一切。
角色命名："青春记录者"呼应纪念册的"记录"使命——用户是青春岁月的记录者，角色命名强化产品的集体叙事。
纪念册的社交延伸：个人中心的同学录、参与册数可以延伸为"我的班级圈"（班级动态、班级活动）——纪念册产品天然具备班级社交的扩展性。

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

负 margin 叠层：统计卡 margin({ top: -24 }) 悬浮，构建顺序决定上下层——调整时配合 zIndex（系列同款坑）。
班级身份的一致性："计科2022级"在 UserCard 副标题与首页纪念册标题同时出现——若班级信息来自数据（而非硬编码），需统一数据源避免两处不一致。
统计数字的跨页核对：86/12/4 与相册页、留言页、首页的核对是验收重点——"数字处处有出处"的系列标准。
📔 符号的全局统一：Tab 图标/首页/Banner/头像四处 📔——若改品牌符号，需全局替换（用常量管理），避免漏改。
菜单 key 长期方案：新增菜单项改用 id 作 key（当前 m.title 5 项内唯一）——系列标准建议。

十、系列横向对比：七个个人中心的身份定位演进

把 App 39-44 六个个人中心并列，可以看到"身份定位"的演进主线：

App	昵称	身份维度	副标题内容
39 兴趣	兴趣探索者	个人画像	兴趣/匹配数据
40 照片	校园摄影师	个人技能	上传/获赞数据
41 表白墙	匿名同学	匿名人设	产品理念
42 树洞	树洞旅人	情绪角色	投稿/抱抱数据
43 明信片	明信片达人	传递角色	寄出数据
44 纪念册	青春记录者	集体归属	计科2022级 · 参与 4 本

演进规律：六代昵称从"探索者 → 摄影师 → 匿名同学 → 旅人 → 达人 → 记录者"逐步从"个人身份"走向"集体归属"——前五个都是"我的画像/技能/角色"（个人维度），App 44 的"计科2022级"首次把班级归属写进副标题（集体维度），统计"照片/留言"是贡献、"纪念册"是圈子——集体产品让个人中心的"身份"从"我是谁"变成"我属于谁"，这是七个个人中心中最本质的定位转变。

同学录的独特性：6 个 App 中只有 App 44 有"同学录"菜单——因为纪念册的资产是"同学关系"（谁是我的班级成员），个人产品没有"成员"概念。菜单永远映射产品的核心资产，同学录即纪念册的"成员资产"入口。

44 我的页完整视图

十一、扩展思考：纪念册产品的毕业季运营

我的页的"计科2022级"身份暗示了毕业场景，围绕毕业季的运营值得展开：

毕业季主推：每年 6 月是纪念册产品的黄金期——首页 Banner 换成"毕业纪念册，记录你的四年"、模板上新（毕业季主题）、推送"为班级创建纪念册"——毕业季运营是纪念册产品的年度高潮。
毕业倒计时：毕业前 30 天倒计时 + 每日提示"今天为纪念册加一张照片/一条寄语"——倒计时制造紧迫感，驱动内容沉淀。
班级聚合：毕业时把班级纪念册聚合为"班级毕业册"（每位同学的个人贡献汇总），生成"毕业回忆报告"（上传了 N 张照片、写了 M 条寄语）——个人贡献的集体化呈现，呼应我的页"贡献 + 圈子"的双维统计。
多年后的召回：毕业 1/3/5 年周年推送"翻开你的纪念册"——纪念册是时间的朋友，周年召回让产品与用户的情感连接跨越时间（与留言页"N 周年解锁"的时间胶囊机制呼应）。
校友沉淀：毕业生成为校友，纪念册沉淀为"校友的记忆资产"——产品从"在校工具"延展为"人生档案"，这是纪念册产品区别于所有校园工具的长尾价值。

44 我的页纪念册 Toast

十二、FAQ 与一句话总结

Q1：为什么副标题是"计科2022级 · 参与 4 本纪念册"而不是个人签名？ 纪念册是集体产品——用户的身份首先是"计科2022级的一员"，副标题展示"班级归属 + 参与规模"比个人签名更能体现产品语境（纪念册卖的是"我们共同的青春"而非"我的个性"）。这是集体产品个人中心与个人产品的身份设计差异。

Q2："同学录"是什么菜单？ 班级同学的通讯录——同学头像/姓名/联系方式，对应首页纪念册的成员（45 人）与班级身份"计科2022级"。它是纪念册"集体记忆"的成员清单，也是系列其他 App 没有的专属菜单。

Q3：86 我的照片和相册页 8 张照片什么关系？ 86 是个人跨纪念册累计上传的照片数，相册页 8 张是"当前纪念册"展示的照片——统计是累计、页面是明细，量级关系合理（8 张中部分是"我"传的）。

Q4：为什么统计是"照片/留言/纪念册"而不是"赞/粉丝"？ 纪念册是集体记录型产品——核心数据是"我贡献了什么"（照片/留言）+ "我参与了什么"（纪念册），不是"谁喜欢我"（赞/粉丝）。数据统计永远反映产品的核心行为。

一句话总结：我的页以 100 行代码完成了"青春记录者"的个人中心范式——淡紫渐变头图配 📔 纪念册头像、"计科2022级"班级身份首现、"86 照片 / 12 留言 / 4 纪念册"的贡献 + 圈子双维统计、5 菜单含"同学录"专属入口。班级身份的前置与"记录者"的角色命名，让本页传递出纪念册独有的集体温度。

44 我的页同学录 Toast

十三、开发者视角：我的页的调试与验证技巧

负 margin 叠层：统计卡 margin({ top: -24 }) 悬浮，构建顺序（UserCard 先、StatRow 后）决定 StatRow 在上层——调整构建顺序需配合 zIndex（系列同款坑）。
班级身份的一致性："计科2022级"在 UserCard 副标题与首页纪念册标题"计科2022级毕业纪念"同时出现——若班级信息来自数据（用户资料），需统一数据源，避免不一致。
统计数字的跨页核对：86/12/4 与相册页（8 张展示）、留言页（3 条展示）、首页（4 本）的核对是验收重点——统计是累计、页面是明细，"数字处处有出处"的系列标准。
📔 符号的全局统一：Tab 图标/首页标题副文案/Banner/UserCard 头像四处 📔——若改品牌符号需全局替换（用常量管理），避免漏改导致符号不一致。
菜单 key 长期方案：新增菜单项改用 id 作 key（当前 m.title 5 项内唯一，扩容有风险）——系列标准建议，为"校友录/班级动态"等扩展菜单预留。

十四、FAQ 与一句话总结

Q6：同学录具体展示什么？ 班级成员清单——每位同学的头像（emoji）、姓名、联系方式（可设置可见性）、在纪念册中的贡献（上传照片数/留言数）——"计科2022级"班级身份的成员化呈现，是纪念册的"关系资产"。

Q7：为什么昵称是"青春记录者"？ 纪念册的使命是"记录青春"——用户通过上传照片、写寄语参与记录，昵称"青春记录者"赋予这份参与以使命感，与首页副标题"记录我们共同的青春"呼应。

Q8：4 本纪念册是全部吗？ 是"我参与的 4 本"（毕业/班级/社团/秋游）——对应首页 4 本、统计"4 纪念册"、副标题"参与 4 本纪念册"，四处完全自洽；产品化后"我的纪念册"菜单展示全部参与记录。

Q9：纪念册产品的个人中心最特殊的是什么？ "班级归属"——个人中心首次展示集体身份（计科2022级）而非个人画像，统计是"贡献（照片/留言）+ 圈子（纪念册）"而非"成就（赞/粉丝）"，菜单含"同学录"——集体产品让个人中心从"我的成绩"变成"我的归属与贡献"。

Q10：设置菜单应包含什么？ 通知（同学上传照片/写寄语提醒）、纪念册管理（退出/转让/删除）、隐私（同学录可见性、照片下载权限）、数据导出（纪念册备份）——集体产品的设置围绕"成员身份与共同资产"展开。这些 FAQ 与前面的拆解共同构成本页的完整解析。

最后从验收视角确认：四张实机截图覆盖了首屏（淡紫渐变+三列统计）、我的纪念册菜单点击（Toast）、同学录菜单点击（Toast）、完整视图（5 菜单+版本号）四个状态，负 margin 悬浮卡、三列等分、菜单整行点击、Divider 条件渲染均验证正常。"计科2022级"、"参与 4 本纪念册"、"86 照片/12 留言"等数据在本页内互相吻合。整页 100 行代码完成"青春记录者"的个人中心，验收通过。