鸿蒙原生应用 ArkUI 实战：明信片我的页 —— 绿色渐变卡 + 三列悬浮统计组合技

鸿蒙原生应用 ArkUI 实战明信片我的页 —— 绿色渐变卡 三列悬浮统计组合技App 43「校园电子明信片」我的页ProfileTab主题色#00B894绿色green4 个 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 我的页完全同构的头图 悬浮卡 菜单 版本范式——主题色绿色系列中首次、统计数据换成明信片业务指标发送/收到/收藏模板、昵称换为明信片达人骨架复用、数据定制的系列惯例延续。项目源码开源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(已寄出 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 同款。三列等分三个 ColumnlayoutWeight(1)自动三等分18 号数字 11 号标签。92% 宽度左右留 4% 呼吸边距。keys.label已发送/已收到/收藏模板天然唯一。数据自洽26 已发送 ↔ 副标题已寄出 26 张温暖同一数字两处展示↔ 发送页发送成功的累计18 已收到 ↔ 别人寄来的明信片数12 收藏模板 ↔ 首页模板的收藏动作。四、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 行 已发送 / 已收到 / ⭐ 收藏模板 / 我的作品 / ⚙️ 设置。菜单语义分析 已发送寄出的明信片列表26 张——含定时发送的待投递任务。 已收到收到的明信片18 张——发/收双向档案。⭐ 收藏模板收藏的首页模板12 个——模板资产的管理。 我的作品自己制作未发送/已发送的明信片作品制作页成果的沉淀——创作档案。⚙️ 设置通知收到明信片提醒、隐私、关于等。实现细节三栏行emoji 标题 、ForEachindex 判断最后一行不加 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 收藏模板 ↔ 模板收藏——数字处处有出处是本页的数据自洽原则。最后以一句收尾明信片达人的档案收藏着每一份寄出的温暖与收到的感动。 回望整页从绿色渐变头图到双向统计从收发档案到模板作品从设置收尾到版本号落幕每个设计都在沉淀传递温暖的完整足迹——这就是明信片个人中心的全部价值。 愿每一张明信片都能抵达它该抵达的人。