鸿蒙原生应用 ArkUI 声明式实战纪念册我的页 —— 淡紫渐变卡与负 margin 悬浮统计行App 44「校园纪念册」我的页ProfileTab主题色#A29BFE淡紫色lavender4 个 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 安全区为悬浮统计卡预留空间、顶部避让状态栏。三、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 })上移叠加在渐变区下缘——系列标志性手法。三列等分三个 ColumnlayoutWeight(1)自动三等分18 号数字 11 号标签。92% 宽度左右留 4% 呼吸边距。keys.label我的照片/我的留言/纪念册天然唯一。数据自洽86 我的照片 ↔ 相册页照片8 张展示 / 86 个人累计、12 我的留言 ↔ 留言页寄语3 条展示 / 12 个人累计、4 纪念册 ↔ 首页 4 本纪念册 ↔ 副标题参与 4 本纪念册——四个数字全部有出处。四、MenuList5 行菜单 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 标题 、ForEachindex 判断最后一行不加 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.title5 项内唯一——系列标准建议。十、系列横向对比七个个人中心的身份定位演进把 App 39-44 六个个人中心并列可以看到身份定位的演进主线App昵称身份维度副标题内容39 兴趣兴趣探索者个人画像兴趣/匹配数据40 照片校园摄影师个人技能上传/获赞数据41 表白墙匿名同学匿名人设产品理念42 树洞树洞旅人情绪角色投稿/抱抱数据43 明信片明信片达人传递角色寄出数据44 纪念册青春记录者集体归属计科2022级 · 参与 4 本演进规律六代昵称从探索者 → 摄影师 → 匿名同学 → 旅人 → 达人 → 记录者逐步从个人身份走向集体归属——前五个都是我的画像/技能/角色个人维度App 44 的计科2022级首次把班级归属写进副标题集体维度统计照片/留言是贡献、纪念册是圈子——集体产品让个人中心的身份从我是谁变成我属于谁这是七个个人中心中最本质的定位转变。同学录的独特性6 个 App 中只有 App 44 有同学录菜单——因为纪念册的资产是同学关系谁是我的班级成员个人产品没有成员概念。菜单永远映射产品的核心资产同学录即纪念册的成员资产入口。十一、扩展思考纪念册产品的毕业季运营我的页的计科2022级身份暗示了毕业场景围绕毕业季的运营值得展开毕业季主推每年 6 月是纪念册产品的黄金期——首页 Banner 换成毕业纪念册记录你的四年、模板上新毕业季主题、推送为班级创建纪念册——毕业季运营是纪念册产品的年度高潮。毕业倒计时毕业前 30 天倒计时 每日提示今天为纪念册加一张照片/一条寄语——倒计时制造紧迫感驱动内容沉淀。班级聚合毕业时把班级纪念册聚合为班级毕业册每位同学的个人贡献汇总生成毕业回忆报告上传了 N 张照片、写了 M 条寄语——个人贡献的集体化呈现呼应我的页贡献 圈子的双维统计。多年后的召回毕业 1/3/5 年周年推送翻开你的纪念册——纪念册是时间的朋友周年召回让产品与用户的情感连接跨越时间与留言页N 周年解锁的时间胶囊机制呼应。校友沉淀毕业生成为校友纪念册沉淀为校友的记忆资产——产品从在校工具延展为人生档案这是纪念册产品区别于所有校园工具的长尾价值。十二、FAQ 与一句话总结Q1为什么副标题是计科2022级 · 参与 4 本纪念册而不是个人签名纪念册是集体产品——用户的身份首先是计科2022级的一员副标题展示班级归属 参与规模比个人签名更能体现产品语境纪念册卖的是我们共同的青春而非我的个性。这是集体产品个人中心与个人产品的身份设计差异。Q2同学录是什么菜单班级同学的通讯录——同学头像/姓名/联系方式对应首页纪念册的成员45 人与班级身份计科2022级。它是纪念册集体记忆的成员清单也是系列其他 App 没有的专属菜单。Q386 我的照片和相册页 8 张照片什么关系86 是个人跨纪念册累计上传的照片数相册页 8 张是当前纪念册展示的照片——统计是累计、页面是明细量级关系合理8 张中部分是我传的。Q4为什么统计是照片/留言/纪念册而不是赞/粉丝纪念册是集体记录型产品——核心数据是我贡献了什么照片/留言 我参与了什么纪念册不是谁喜欢我赞/粉丝。数据统计永远反映产品的核心行为。一句话总结我的页以 100 行代码完成了青春记录者的个人中心范式——淡紫渐变头图配 纪念册头像、计科2022级班级身份首现、86 照片 / 12 留言 / 4 纪念册的贡献 圈子双维统计、5 菜单含同学录专属入口。班级身份的前置与记录者的角色命名让本页传递出纪念册独有的集体温度。十三、开发者视角我的页的调试与验证技巧负 margin 叠层统计卡margin({ top: -24 })悬浮构建顺序UserCard 先、StatRow 后决定 StatRow 在上层——调整构建顺序需配合zIndex系列同款坑。班级身份的一致性计科2022级在 UserCard 副标题与首页纪念册标题计科2022级毕业纪念同时出现——若班级信息来自数据用户资料需统一数据源避免不一致。统计数字的跨页核对86/12/4 与相册页8 张展示、留言页3 条展示、首页4 本的核对是验收重点——统计是累计、页面是明细数字处处有出处的系列标准。 符号的全局统一Tab 图标/首页标题副文案/Banner/UserCard 头像四处 ——若改品牌符号需全局替换用常量管理避免漏改导致符号不一致。菜单 key 长期方案新增菜单项改用 id 作 key当前m.title5 项内唯一扩容有风险——系列标准建议为校友录/班级动态等扩展菜单预留。十四、FAQ 与一句话总结Q6同学录具体展示什么班级成员清单——每位同学的头像emoji、姓名、联系方式可设置可见性、在纪念册中的贡献上传照片数/留言数——计科2022级班级身份的成员化呈现是纪念册的关系资产。Q7为什么昵称是青春记录者纪念册的使命是记录青春——用户通过上传照片、写寄语参与记录昵称青春记录者赋予这份参与以使命感与首页副标题记录我们共同的青春呼应。Q84 本纪念册是全部吗是我参与的 4 本毕业/班级/社团/秋游——对应首页 4 本、统计4 纪念册、副标题参与 4 本纪念册四处完全自洽产品化后我的纪念册菜单展示全部参与记录。Q9纪念册产品的个人中心最特殊的是什么班级归属——个人中心首次展示集体身份计科2022级而非个人画像统计是贡献照片/留言 圈子纪念册而非成就赞/粉丝菜单含同学录——集体产品让个人中心从我的成绩变成我的归属与贡献。Q10设置菜单应包含什么通知同学上传照片/写寄语提醒、纪念册管理退出/转让/删除、隐私同学录可见性、照片下载权限、数据导出纪念册备份——集体产品的设置围绕成员身份与共同资产展开。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏淡紫渐变三列统计、我的纪念册菜单点击Toast、同学录菜单点击Toast、完整视图5 菜单版本号四个状态负 margin 悬浮卡、三列等分、菜单整行点击、Divider 条件渲染均验证正常。计科2022级、参与 4 本纪念册、86 照片/12 留言等数据在本页内互相吻合。整页 100 行代码完成青春记录者的个人中心验收通过。