鸿蒙原生应用 ArkUI 实战：明信片我的页 —— 绿色渐变卡 + 三列悬浮统计组合技
鸿蒙原生应用 ArkUI 实战：明信片我的页 —— 绿色渐变卡 + 三列悬浮统计组合技
App 43「校园电子明信片」我的页（ProfileTab），主题色
#00B894绿色（green），4 个 Tab 分别为首页（📮）、制作（🎨）、发送（✉️）、我的（👤）。我的页采用"UserCard + 统计行 + 菜单 + 关于"四区布局——绿色渐变 UserCard（💌 64×64 半透明信封头像 + "明信片达人"18 号加粗 + "已寄出 26 张温暖 💕"） + 三列悬浮统计卡（26 已发送 / 18 已收到 / 12 收藏模板，负 margin 上浮叠在渐变区下缘） + 5 行菜单（📤 已发送 / 📥 已收到 / ⭐ 收藏模板 / 🎨 我的作品 / ⚙️ 设置，Divider 分隔 + ">" 箭头） + 底部关于区（校园电子明信片 Version 1.0.0）。本篇基于43-e-postcard/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 — 三列悬浮统计卡（26 已发送 / 18 已收到 / 12 收藏模板）
- MenuList — 5 行功能菜单
- About — 底部版本信息收尾
与 App 39-42 我的页完全同构的"头图 + 悬浮卡 + 菜单 + 版本"范式——主题色绿色（系列中首次）、统计数据换成明信片业务指标（发送/收到/收藏模板）、昵称换为"明信片达人"，骨架复用、数据定制的系列惯例延续。
二、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('已寄出 26 张温暖 💕').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从#00B894绿渐变到#4BC9A8浅绿——与首页模板渐变、制作页预览卡、发送页成果卡同色系，绿色贯穿全 App（系列首次使用绿色主题）。 - 💌 信封头像：64×64 半透明圆底 + 32 号 💌——与 Tab 图标（📮 邮箱/信封）近似但不同：Tab 是 📮（邮箱），头像用 💌（情书），"寄信"与"心意"的双重意象。
- 昵称"明信片达人"：达人定位（与 App 40"校园摄影师"同款后缀）——"达人"暗示技能/资历（26 张已寄出的积累），比"明信片爱好者"更有产品自信。
- 副标题："已寄出 26 张温暖 💕"——不写"26 张明信片"而写"26 张温暖"，用"温暖"量化明信片的情感价值（每张明信片都是一份温暖），文案极具产品温度。
- 底部 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 行）：26 已发送 / 18 已收到 / 12 收藏模板——三列，指标完全贴合明信片业务："已发送"（寄出量）、"已收到"（收到量）、"收藏模板"（模板资产）——"发"与"收"双向计数是明信片产品（传递型产品）区别于内容产品（点赞型）的统计特征。
技术要点：
- 负 margin 悬浮：
.margin({ top: -24 })上移叠加在渐变区下缘——系列标志性手法（App 39/40/41/42 同款）。 - 三列等分：三个 Column
layoutWeight(1)自动三等分，18 号数字 + 11 号标签。 - 92% 宽度：左右留 4% 呼吸边距。
- key：
s.label（已发送/已收到/收藏模板，天然唯一）。
数据自洽：26 已发送 ↔ 副标题"已寄出 26 张温暖"（同一数字两处展示）↔ 发送页"发送成功"的累计；18 已收到 ↔ 别人寄来的明信片数；12 收藏模板 ↔ 首页模板的收藏动作。
四、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 行）：📤 已发送 / 📥 已收到 / ⭐ 收藏模板 / 🎨 我的作品 / ⚙️ 设置。
菜单语义分析：
- 📤 已发送：寄出的明信片列表（26 张）——含定时发送的待投递任务。
- 📥 已收到：收到的明信片（18 张）——"发/收"双向档案。
- ⭐ 收藏模板：收藏的首页模板（12 个）——模板资产的管理。
- 🎨 我的作品：自己制作未发送/已发送的明信片作品（制作页成果的沉淀）——创作档案。
- ⚙️ 设置：通知（收到明信片提醒）、隐私、关于等。
实现细节：三栏行（emoji + 标题 + ">"）、ForEach index 判断最后一行不加 Divider、整行可点 Toast、92% 宽卡片——系列标准菜单卡。margin({ top: 16 }) 与统计卡保持间距。前 4 个菜单恰好对应统计卡的三个数字（已发送/已收到/收藏模板）+ 作品维度，菜单即统计的落地页。
五、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 }) 与菜单卡拉开距离——系列统一收尾。
六、跨页数据自洽：我的页 = 明信片达人档案
我的页每个元素都能在其他页面找到呼应：
- "已寄出 26 张温暖" ↔ 副标题"已寄出 26 张温暖" ↔ 发送页"发送成功"——寄出动作的累计。
- "26 已发送 / 18 已收到" ↔ 发送页的"发"与"收"——传递型产品的双向数据（区别于内容产品的"赞/收藏"单向数据）。
- "12 收藏模板" ↔ 首页 6 模板的收藏——模板资产沉淀。
- "📤 已发送 / 📥 已收到 / ⭐ 收藏模板 / 🎨 我的作品"4 菜单 ↔ 统计卡三数字 + 制作页成果——菜单即统计的落地页。
- 绿色渐变 ↔ 首页模板/制作页预览/发送页成果——绿色品牌全 App 统一。
七、实机截图与交互演示
本节结合 4 张实机截图，逐张还原我的页的视觉效果与交互过程。
1. 我的页首屏：绿色渐变 + 三列统计
第一张截图是我的页默认首屏：顶部绿色渐变 UserCard——💌 半透明信封头像、右侧"明信片达人"加粗白字与"已寄出 26 张温暖 💕"；下方白色统计卡以负边距悬浮在渐变区下缘，三列数字（26 已发送 / 18 已收到 / 12 收藏模板）等分排布；再往下是菜单第一、二行"📤 已发送 / 📥 已收到"。绿色渐变 + 白卡悬浮的层次感与系列其他 App 同构，绿色主题在系列中首次亮相，清新自然。
2. 点击"已收到"：弹出 Toast
第二张截图是点击菜单第二行"📥 已收到"后的反馈：弹出"已收到"Toast。"已收到"对应统计卡"18 已收到"——别人寄来的明信片在此查看，是"明信片达人"收到的心意合集，与"已发送"形成收发双向档案。
3. 点击"我的作品"：弹出 Toast
第三张截图是点击菜单第四行"🎨 我的作品"后的反馈：弹出"我的作品"Toast。"我的作品"是制作页成果的沉淀（制作的明信片草稿/成品），与"已发送"（寄出的）、"收藏模板"（收藏别人的）区分——"我的作品"是创作、其他是记录，个人中心的功能分域清晰。
4. 我的页完整视图：5 菜单 + 版本信息
第四张截图是我的页完整视图：五个菜单（📤 已发送 / 📥 已收到 / ⭐ 收藏模板 / 🎨 我的作品 / ⚙️ 设置）全部可见，最后一行"⚙️ 设置"后无 Divider，最底部是"校园电子明信片 / Version 1.0.0"。从渐变头图到版本号，四区块在单屏内完整呈现。
八、扩展思考：传递型产品的个人中心设计
明信片是"传递型产品"（我寄你收），其个人中心与"内容型"（发布/获赞）有本质差异：
- 双向数据：统计是"26 已发送 / 18 已收到"双向——内容产品只有"我的发布/获赞"单向。传递型产品的核心数据是"传出去"与"收进来"两个方向的流动，双向统计让用户看到"我的心意传递了多少、我收到了多少温暖"。
- 收发的时间线：已发送/已收到列表应按时间线组织（寄出日期/收到日期）——明信片的"旅途"（何时寄出、何时送达）是产品的情感叙事线。
- 模板资产的沉淀："收藏模板"是创作工具类产品的特殊资产——收藏的模板是"想用还没用的灵感库"，与作品（已用的）区分。
- 祝福语的沉淀：我的作品可展示每张明信片的祝福语——"我写过的话"是情感档案，比照片更有"温度记录"价值。
- 温暖数据可视化：可统计"累计寄出 N 张、平均每张 48 字祝福"——把明信片数据转化为"你的温暖报告"，与 App 42 树洞的情绪曲线异曲同工。
九、开发者视角：我的页的调试与验证技巧
- 负 margin 叠层：统计卡
margin({ top: -24 })悬浮，构建顺序决定上下层——调整时配合zIndex（系列同款坑）。 - 收发数据的一致性：26 已发送 / 18 已收到与副标题、发送页、首页的数据核对是验收重点——"数字处处有出处"的系列标准。
- 💌 与 📮 的图标区分：头像 💌（情书）与 Tab 📮（邮箱）易混淆——若品牌要求统一，可都改为 💌 或都改为 📮，当前"寄信 + 心意"双意象是刻意设计，注意向团队说明避免误改。
- 菜单 key 长期方案：新增菜单项改用 id 作 key（当前
m.title5 项内唯一，扩容有风险）——系列标准建议。 - 作品与发送的联动："我的作品"中的草稿应支持"继续制作"（跳转制作页回填状态）——跨页状态传递需设计数据模型（作品 id），产品化时先建模型再连跳转。
十、系列横向对比：六个个人中心的业务数据谱系
把 App 39-43 五个个人中心并列，可以看到业务数据与产品形态的映射关系：
| App | 昵称 | 统计（核心指标） | 产品形态 |
|---|---|---|---|
| 39 兴趣 | 兴趣探索者 | 标签/匹配/好友 | 社交 |
| 40 照片 | 校园摄影师 | 照片/赞/收藏 | 内容 |
| 41 表白墙 | 匿名同学 | 发布/赞/收藏 | 表达 |
| 42 树洞 | 树洞旅人 | 投稿/抱抱/收藏 | 情绪 |
| 43 明信片 | 明信片达人 | 发送/收到/收藏模板 | 传递 |
演进规律：五个 App 的统计从"人脉（39）→ 作品（40）→ 表达（41）→ 情绪（42）→ 传递（43）"逐层深入，而 App 43 是系列唯一"双向传递"数据（发送 + 收到）——因为明信片是点对点投递（寄给你、你寄给我），其他产品是点对面发布（发给大家）。"26 已发送 / 18 已收到"的双向统计，精确刻画了"我的心意流动"而非"我的产出积累"，这是传递型产品个人中心的最大辨识度。
菜单即功能地图：5 个 App 的菜单都精确对应各自业务——明信片是"已发送/已收到/收藏模板/我的作品"（收发档案 + 模板资产 + 创作），看菜单即可反推产品做什么。系列方法论的"数据定制 + 骨架复用"在本页再次得到验证。
十一、开发者视角：我的页的调试与验证技巧
- 负 margin 叠层：统计卡
margin({ top: -24 })悬浮，构建顺序决定上下层——调整时配合zIndex（系列同款坑）。 - 收发数据的一致性：26 已发送 ↔ 副标题"已寄出 26 张温暖"、18 已收到 ↔ 发送页/收件链路——数字处处有出处的系列验收标准。
- 💌 头像与 📮 Tab 的视觉统一：头像 💌（情书）与 Tab 📮（邮箱）意象相关但符号不同——若用户混淆，可统一为同一符号，或接受"寄信 + 心意"的双重表达（当前设计）。
- 菜单 key：新增菜单项改用 id 作 key（当前
m.title5 项内唯一）——系列标准建议。 - 作品续编的状态传递："我的作品"草稿点击"继续制作"需携带作品数据跳转制作页——建立
Postcard对象模型（id/背景/祝福/字体）并传参，产品化的数据层前置工作。
十二、扩展思考：明信片达人的温暖报告
我的页的统计可以升级为"温暖报告"，让数据承载情感叙事：
- 温暖数据可视化：把"26 已发送 / 18 已收到"扩展为"温暖报告"——累计寄出 N 张、最常寄给家人/朋友、收到最多的模板类型——明信片数据是情感的记录，可视化让用户"看见自己的心意轨迹"（与 App 42 树洞的情绪曲线异曲同工）。
- 寄送日历：按月份展示寄送量（毕业季 6 月高峰、节日 12 月高峰）——寄送时间线是用户社交关系的时间胶囊。
- 温暖等级：寄出 26 张 → "温暖使者"、50 张 → "温暖达人"、100 张 → "温暖大使"——等级激励持续寄送（与 App 40 摄影师等级的创作者激励同源）。
- 收件人画像：统计"最常寄给谁"（妈妈 8 张 / 室友 5 张）——收件人维度让明信片数据从"数量"变成"关系"，是传递型产品独有的数据分析。
- 明信片纪念册：已发送/已收到的明信片可按时间装订成"电子纪念册"，翻页回顾——明信片的收藏价值最终沉淀为用户的"情感档案"，这是本页"已发送/已收到"菜单产品化的终极形态。
十三、FAQ 与一句话总结
Q1：为什么统计是"已发送/已收到"而不是"获赞/粉丝"？ 明信片是传递型产品——核心数据是"寄出多少、收到多少"（双向流动），不是"多少人喜欢"（单向评价）。"26 寄出 / 18 收到"让用户看到心意的双向传递，符合明信片"联结情感"的产品本质。
Q2："已发送"和"我的作品"有什么区别？ 已发送是"寄出去的记录"（收发档案），我的作品是"制作的创作"（含未发送草稿）——一个记录、一个创作，分域清晰；已发送的明信片同时存在于两处（寄出的也是作品）。
Q3："收藏模板"是收藏首页的模板吗？ 是的——首页 6 模板可收藏（我的页 12 收藏模板），收藏后在此查看并可直接"用此模板制作"，是创作工具类产品的灵感库。
Q4：为什么副标题写"26 张温暖"而不写"26 张明信片"？ "温暖"把明信片量化成情感价值——每张明信片都是一份寄出的温暖，比干巴巴的"明信片"更有产品温度，也与 💕 结尾呼应，是文案即产品的体现。
Q5：我的页和系列其他 App 的个人中心有什么区别？ 骨架完全一致（渐变头图 + 悬浮统计 + 菜单 + 版本），差异全在业务数据：昵称"树洞旅人/匿名同学/校园摄影师"换为"明信片达人"、统计"投稿/抱抱"换为"发送/收到/收藏模板"、菜单换为"收发档案/模板/作品"——同一模板注入不同业务语义即不同产品，本次是系列首个"传递型"业务数据，双向统计是最大差异。
一句话总结：我的页以 100 行代码完成了明信片达人的个人中心范式——绿色渐变头图配 💌 信封头像、"明信片达人"达人定位、"26 已发送 / 18 已收到 / 12 收藏模板"双向统计、5 菜单覆盖"收发档案/模板/作品/设置"。"26 张温暖"的情感化文案与"发/收"双向统计是本页的灵魂，也让明信片产品"传递温暖"的使命在个人中心得到最终沉淀。
最后从验收视角确认：四张实机截图覆盖了首屏（绿色渐变+三列统计）、已收到菜单点击（Toast）、我的作品菜单点击（Toast）、完整视图（5 菜单+版本号）四个状态，负 margin 悬浮卡、三列等分、菜单整行点击、Divider 条件渲染均验证正常。数据自洽通过核对——"26 已发送 / 18 已收到"与副标题"已寄出 26 张温暖"一致，"12 收藏模板"与💌 头像、Tab 📮、首页标题的品牌符号统一。整页 100 行代码完成"明信片达人"的个人中心，验收通过。
补充开发问答：Q1 已发送与已收到的明信片如何展示？——列表卡片复用模板样式（渐变缩略 + 名称 + 日期 + 状态），已发送可显示"已送达/待送达"角标（定时任务），已收到可显示寄件人与收到时间。Q2 收藏模板与模板库的关系？——收藏是模板的动作（⭐），收藏后在我的页"收藏模板"查看并可直接"用此模板制作"。Q3 为什么没有"草稿箱"菜单？——"我的作品"承担草稿职能（制作的未发送明信片），草稿与成品分域展示是产品化选择；若要细分，可在"我的作品"内分"草稿/已完成"两段。Q4 设置菜单应包含什么？——明信片的点对点隐私（接收人可见性）、送达通知开关、定时任务管理、数据导出。Q5 本页数据如何自洽？——26 已发送 ↔ 发送成功累计、18 已收到 ↔ 送达链路、12 收藏模板 ↔ 模板收藏——"数字处处有出处"是本页的数据自洽原则。
最后以一句收尾：明信片达人的档案，收藏着每一份寄出的温暖与收到的感动。 回望整页，从绿色渐变头图到双向统计，从收发档案到模板作品，从设置收尾到版本号落幕，每个设计都在沉淀"传递温暖"的完整足迹——这就是明信片个人中心的全部价值。 愿每一张明信片，都能抵达它该抵达的人。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
3
0- 0
已为社区贡献388条内容
所有评论(0)