鸿蒙原生应用 ArkTS 严格模式实战兴趣匹配我的页 —— 负边距悬浮统计与兴趣标签胶囊组合技App 39「校园兴趣匹配」我的页ProfileTab主题色#FF6B9D粉色pink4 个 Tab 分别为首页、兴趣、匹配、我的。我的页采用UserCard 统计行 标签卡 菜单 关于五区布局——粉色渐变 UserCard 64×64 半透明头像 兴趣探索者18 号加粗 “已匹配 24 人 · 好友 18”负边距悬浮统计卡5 兴趣标签 / 24 匹配历史 / 18 好友三列等分我的兴趣标签卡#民谣 #摄影 #旅行 #篮球 #阅读 五个粉色胶囊5 行菜单️ 兴趣标签 / 匹配历史 / 个人资料 / 隐私设置 / ⚙️ 通用设置Divider 分隔 “” 箭头底部关于区校园兴趣匹配 Version 1.0.0。本篇基于39-interest-match/entry/src/main/ets/pages/ProfileTab.ets共 118 行逐段拆解附 4 张实机截图。一、整体结构五区UserCard 统计 标签 菜单 关于布局我的页是五个 Builder 块纵向堆叠的个人中心标准范式build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.TagCard() 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) }5 块结构UserCard— 渐变品牌区展示身份与核心数据摘要StatRow— 三列统计卡用负 margin 悬浮在渐变卡下缘是本页最精巧的布局手法TagCard— 我的兴趣标签胶囊卡呼应兴趣页采集的画像数据MenuList— 5 行功能菜单个人中心的标配入口集合About— 底部版本信息收尾整页整个页面只有一个Scroll无顶部固定 Header——渐变 UserCard 本身就是头图这种头图式个人页设计在社交产品中非常常见如微信、探探。项目源码开源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(已匹配 24 人 · 好友 18).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({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })与首页今日匹配卡完全同款渐变135° 从粉到浅粉——品牌渐变贯穿首页与我的页全 App 视觉统一。半透明头像底64×64 圆形、#33FFFFFF约 20% 透明度白底 32 号 emoji。半透明设计在渐变背景上呈现磨砂玻璃质感比纯白底更高级。双行身份信息主行兴趣探索者18 号加粗白字副行已匹配 24 人 · 好友 1812 号白字 85% 透明度——用户名 数据摘要的经典组合。关键 padding底部bottom: 44预留大块空白为下方悬浮统计卡留出视觉呼吸空间配合 StatRow 的负 margin 使用。安全区顶部padding({ top: this.safeTop 30 })把渐变区推到状态栏之下。三、StatRow负 margin 悬浮统计卡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 }) }这可能是本页最值得学习的一段代码负 margin 实现悬浮.margin({ top: -24 })让白卡向上位移 24 像素恰好叠在渐变区底部预留的 44 空白上形成卡片悬浮于头图下缘的立体层次感——不依赖 absolute 定位纯用负边距完成是 ArkUI 的常见技巧。92% 宽度自居中卡片宽度 92%两侧各留 4% 呼吸边距比全宽更轻盈。ForEach 渲染统计数据来自private stats: StatItem[]17-21 行5 兴趣标签 / 24 匹配历史 / 18 好友三个 Column 用layoutWeight(1)等分。key 用 labelForEach以s.label作为 key兴趣标签/匹配历史/好友天然唯一。四、TagCard我的兴趣标签卡TagCard() { Column({ space: 10 }) { Text(我的兴趣标签).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.myTags, (t: string) { Text(# t).fontSize(12).fontColor(C.primary) .padding({ left: 12, right: 12, top: 6, bottom: 6 }).backgroundColor(C.primarySoft).borderRadius(14) .margin({ right: 10, bottom: 10 }) }, (t: string) t) }.width(100%) } .width(92%).padding(14).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }数据源private myTags: string[] [民谣, 摄影, 旅行, 篮球, 阅读]15 行——与兴趣页默认选中民谣/摄影/篮球 补选旅行/阅读完全对应构成在兴趣页采集 → 在我的页展示的闭环。胶囊样式12 号粉色文字 primarySoft浅粉底 圆角 14 #前缀与兴趣页选中态胶囊白字粉底形成展示态 vs 编辑态的区分设计语言统一且功能角色清晰。标题行14 号加粗我的兴趣标签为整卡定义内容。布局92% 宽度 margin({ top: 14 })与统计卡保持间距Flex自动换行排布 5 个胶囊。五、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: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }5 个菜单项23-29 行️ 兴趣标签 / 匹配历史 / 个人资料 / 隐私设置 / ⚙️ 通用设置。实现细节三栏行emoji18 号 标题14 号layoutWeight(1)占满中段 “” 箭头浅灰标准列表行结构。ForEach 的 index 参数回调第二参idx用于判断——idx this.menus.length - 1时在行后渲染Divider即最后一行不加分隔线符合移动端列表的视觉惯例。Divider 细线color(C.stroke)strokeWidth(0.5)的极细浅线弱化分隔、强化整体感。整行可点点击事件挂在整行 Row 上Toast 显示菜单名。卡片容器92% 宽度、圆角 14、描边与上方 TagCard 视觉对齐。六、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)进一步弱化版本号符合版本信息越低调越好的惯例真实应用中点击版本号常隐藏检查更新/开发者选项等彩蛋入口。七、跨页数据自洽我的页 全 App 数据总汇我的页是全 App 数据最密集的页面每一个数字都能在其他页面找到出处“5 兴趣标签”↔ 兴趣页 23 个胶囊中的选中集合默认 3 补选 2“24 匹配历史”↔ 匹配页统计卡24 匹配的人、UserCard已匹配 24 人“18 好友”↔ 匹配页12 已打招呼的转化结果打招呼 → 成为好友“#民谣 #摄影 #旅行 #篮球 #阅读”↔ 兴趣页默认选中的民谣/摄影/篮球 提示补选的旅行/阅读这种数字处处有出处的设计让整个 Demo 像一台自洽的小机器任何一个页面单独截图都经得起推敲这也是本系列文章反复强调的核心验收点。八、扩展思考个人中心页的可复用设计模式头图 悬浮卡负 margin 悬浮手法是轻量级层次感的通用解无需 zIndex 或绝对定位值得在任意个人页复用。数据漏斗叙事匹配的人 → 高契合度 → 已打招呼 → 好友构成完整转化漏斗个人页统计应尽量围绕业务漏斗组织而不是堆砌无意义数字。菜单项的未来形态5 个菜单当前全是 Toast真实产品中分别对应跳转子页标签管理、匹配记录、资料编辑、隐私开关、设置面板可在本页基础上直接扩展路由。状态持久化若把myTags改为从 Preferences 读取兴趣页保存后我的页即时更新体验闭环将彻底打通。头像可点击UserCard 的头像当前不可点产品化后可加更换头像入口——emoji 头像 → 上传真实头像的升级路径。九、实机截图与交互演示本节结合 4 张实机截图逐张还原我的页的视觉效果与交互过程。1. 我的页首屏渐变头图 悬浮统计 标签卡第一张截图是我的页默认首屏顶部是粉色渐变 UserCard——左侧 半透明圆形头像 64×64、右侧兴趣探索者18 号加粗白字与已匹配 24 人 · 好友 1812 号副信息下方白色统计卡以负边距悬浮在渐变区下缘显示5 兴趣标签 / 24 匹配历史 / 18 好友三个数字再往下是我的兴趣标签卡五个粉色胶囊#民谣 #摄影 #旅行 #篮球 #阅读依次排开。整页层次分明悬浮卡是视觉焦点。2. 点击匹配历史菜单弹出 Toast第二张截图演示了点击菜单第二行 匹配历史后的反馈弹出匹配历史Toast。五行的点击事件都挂载在整行 Row 上点击任意位置emoji、标题、箭头均可触发点击热区大、误触率低是移动端列表项的标准交互做法。3. 点击隐私设置菜单弹出 Toast第三张截图是点击菜单第四行 隐私设置后的反馈——Toast 显示隐私设置。菜单行之间以 0.5 宽度浅灰 Divider 分隔最后一行通用设置不带分隔线视觉上最后一项收尾的处理干净利落细节体现工程用心。4. 完整视图5 菜单 版本信息第四张截图是我的页完整视图五个菜单️ 兴趣标签 / 匹配历史 / 个人资料 / 隐私设置 / ⚙️ 通用设置全部可见最底部是校园兴趣匹配 / Version 1.0.0版本信息。从渐变头图到版本号五个区块在单屏内完整呈现无需滚动即可纵览个人中心的全部功能入口。十、扩展细节个人中心页面的状态与持久化设计我的页目前的头像、昵称、统计、标签全部来自静态数据真实产品中这些都应动态化用户模型集中管理将头像、昵称、标签、统计封装为统一的UserProfile模型通过全局AppStorage或状态管理库如 ohos/state-management 的 V2 状态注入页面我的页与兴趣页共享同一用户对象。Preferences 本地缓存用户修改标签后用ohos.data.preferences持久化到本地App 重启后自动回显——onPageShow时读取、保存时写入实现编辑一次、处处生效。云端同步真实场景应接入账号体系如鸿蒙的账号服务或自建后端我的页数据随账号云端同步换设备不丢数据这也是已匹配 24 人这类统计能够跨端一致的前提。菜单路由五个菜单当前都是 Toast产品化后应各自跳转子页——可用Navigation或router.pushUrl挂接真实页面菜单的 emoji 与标题即为子页面的图标与标题扩展成本极低。十一、扩展细节四 Tab 状态联动的设计蓝图如果把这四个页面当作一个整体最理想的状态设计是单一数据源 四处投影画像是圆心用户的所有标签集中存储如全局myTags: string[]兴趣页编辑它、我的页展示它——两页永远一致无需手动同步。匹配是派生数据匹配度、共同兴趣、统计数字都由我的标签 × 他人标签实时计算兴趣页每次保存标签匹配页的排序与共同兴趣立刻重算——从静态数组升级为计算属性是唯一改动。首页是摘要首页的今日最佳匹配卡、推荐列表本质是对匹配结果的 Top-N 摘要展示可共享匹配页的数据层只做不同的切片与排序。统一刷新机制用AppStorage的键值对或消息总线在四页之间广播画像已更新任意页面改动后其余页面onPageShow时自动重新读取即可实现教科书式的状态联动。十二、彩蛋细节与终评兴趣探索者昵称不叫用户 xxx而叫兴趣探索者用产品语境赋予用户身份感是社交产品人设化的小心机。 头像与 Tab 图标同款我的页 Tab 图标是 UserCard 头像也是 头像即品牌符号。半透明头像底#33FFFFFF20% 透明度在渐变上呈玻璃质感与首页 Progress 底环#44FFFFFF的透明度手法一脉相承——这套 Demo 系列钟爱半透明白叠渐变的质感方案。五个菜单 emoji 全配齐️⚙️ 五枚 emoji 覆盖标签/记录/资料/隐私/设置五个功能域图文并茂。About 区无描边区别于上方所有卡片About 区是裸文本视觉层级最低正确地退到页面末尾当背景板。我的页以 118 行代码完成了个人中心页的完整范式渐变头图、悬浮统计、标签回顾、菜单导航、版本收尾五区结构层次分明、数据全链路自洽。负 margin 悬浮卡是最值得抄走的技巧而数字处处有出处的数据设计则是最值得借鉴的产品思路。十三、常见问题与开发避坑个人中心页看似简单实际开发中踩坑率却很高以下几点务必注意负 margin 的层级问题margin({ top: -24 })让统计卡上移悬浮但它与渐变卡的叠放顺序取决于构建顺序后写的在上层。若想调整悬浮的上下层级需要配合zIndex显式控制否则不同机型的渲染顺序差异可能导致卡片被渐变区盖住一部分。渐变区的圆角缺失UserCard 的渐变背景是linearGradient但本身没有设置圆角左右边缘是直角贴边设计。如果产品想要圆角头图需在渐变外层包一个borderRadius容器并配合clip如clip(true)裁切否则圆角与渐变会分层露出白角。半透明色的 alpha 值换算#33FFFFFF中的 33 是十六进制 alpha约 20%不要想当然写成 CSS 的 0.33 语法同理首页 Progress 底环的#44FFFFFF约 26.7%。ArkUI 颜色一律是#AARRGGBB格式alpha 在前。ForEach 第三参的陷阱ForEach(arr, builder, (item, index) key)中若 key 依赖 index如${item.id}-${index}列表重排会导致 key 全变、节点全重建——本页菜单用m.title作 key 正确规避了此问题。Divider 与 ForEach 的混排if (idx len - 1) { Divider() }写在 ForEach 构建函数内是合法写法但注意 Divider 必须要有明确父容器宽度否则可能撑满全屏而非卡片宽度——本页 Divider 位于 92% 宽卡片内部行为正确。十四、系列横向对比个人中心的五种头图风格我的页的头图设计直接决定整个个人中心的质感本系列各 App 提供了五种可对照的风格方案风格代表 App头图形式氛围渐变头图 悬浮卡App 39粉色渐变 负边距统计甜美活力纯色品牌头App 37考试红标题区严肃正式浅色卡片头App 34草绿图标区清新轻量图标居中头App 32晴空蓝 大图标简洁直观大图头App 36琥珀橙横幅温暖饱满App 39 的渐变头图 负边距悬浮卡是五种方案中最有层次感的一种渐变区提供情绪基调悬浮卡制造立体错位标签卡与菜单卡依次下探整页如同一张精心排版的名片。这种风格在保持代码轻量仅 118 行的同时实现了接近定制设计的视觉完成度是资源有限的小团队快速做出高级感个人中心的性价比之选。若未来要升级可在此结构上叠加横幅背景 模糊遮罩 圆角切角等进阶手法但现有范式已经足够撑起一个完整的校园兴趣社交产品的门面。十五、FAQ关于我的页的常见疑问Q1负 margin 悬浮卡会不会在深色模式下出错不会。负 margin 是布局机制与颜色无关深色模式只需让C.card切换为深色值即可。唯一要注意的是悬浮卡与渐变区要有足够的色彩对比白卡 × 粉渐变若主题色换深记得同步调整卡片底色。Q2已匹配 24 人 · 好友 18与统计卡的24 匹配历史 / 18 好友重复吗不重复是摘要 明细关系UserCard 副标题是顶部摘要统计卡是下方明细展开。摘要抓眼球、明细供核对这是个人页的常见信息分层用户不会觉得啰嗦反而觉得数据对得上。Q3五个菜单项为什么都用 Toast 而不是跳转原型阶段用 Toast 占位交互成本最低、反馈最快。产品化时每个菜单对应一个子页面标签管理、匹配记录、资料编辑、隐私设置、设置面板把onClick里的 Toast 换成router.pushUrl即可其余代码不动——菜单结构已为路由预留好全部参数标题即页面名。Q4我的页没有顶部固定 Header滚动时会不会突兀不会。渐变 UserCard 本身就是头图滚动时内容从渐变区下方自然滑出这是社交产品微信/探探的成熟范式。若想要滚动后浮现标题栏的效果可用Scroll的onScrollIndex监听 透明度渐变实现属于进阶美化。Q5版本号可以点击吗当前不可点。产品化时可在About的版本号上挂onClick连续点击 5 次弹出开发者选项或跳转检查更新页——这是移动端约定俗成的彩蛋入口一行代码即可实现。Q6为什么头像用 而不是用户照片emoji 头像零资源、零网络、跨端一致还天然契合兴趣匹配的轻松调性更重要的是它暗示头像 兴趣符号的产品设定首页用户的 同理。真实产品接入拍照/相册上传后头像容器结构无需改变只需把内部 emoji 换成Image。十六、一句话总结我的页是个人中心范式的完整样本渐变头图定基调、负边距悬浮卡造层次、标签卡回顾画像、菜单卡收纳入口、版本号收尾。118 行代码把五种区块有机组合且每个数字都能在其他页面找到出处——这种数据处处自洽的严谨正是它从一堆 Demo 页中脱颖而出的原因。收尾再谈一个容易被忽略的工程细节我的页的Scroll容器没有设置scrollBar但 ArkUI 默认会显示细滚动条——本页所有区块在单屏内即可完整呈现实际并不产生滚动因此滚动条从未出现观感干净。若未来内容变长需要滚动记得显式设置scrollBar(BarState.Off)保持视觉统一或在onScrollIndex中做滚动即隐藏滚动条的优化。另外五区之间的间距节奏14/24 两档与圆角体系20/14/10全部来自D常量与全 App 保持一致——个人中心作为最后一个 Tab往往最容易被潦草收尾而本页用同等质量标准完成反而成为整套 App 完成度最均匀的一页。 
长河君 · 2026/9/30 18:07:54 · 阅读 1.2k 鸿蒙原生应用 ArkTS 严格模式实战：兴趣匹配我的页 —— 负边距悬浮统计与兴趣标签胶囊组合技
鸿蒙原生应用 ArkTS 严格模式实战兴趣匹配我的页 —— 负边距悬浮统计与兴趣标签胶囊组合技App 39「校园兴趣匹配」我的页ProfileTab主题色#FF6B9D粉色pink4 个 Tab 分别为首页、兴趣、匹配、我的。我的页采用UserCard 统计行 标签卡 菜单 关于五区布局——粉色渐变 UserCard 64×64 半透明头像 兴趣探索者18 号加粗 “已匹配 24 人 · 好友 18”负边距悬浮统计卡5 兴趣标签 / 24 匹配历史 / 18 好友三列等分我的兴趣标签卡#民谣 #摄影 #旅行 #篮球 #阅读 五个粉色胶囊5 行菜单️ 兴趣标签 / 匹配历史 / 个人资料 / 隐私设置 / ⚙️ 通用设置Divider 分隔 “” 箭头底部关于区校园兴趣匹配 Version 1.0.0。本篇基于39-interest-match/entry/src/main/ets/pages/ProfileTab.ets共 118 行逐段拆解附 4 张实机截图。一、整体结构五区UserCard 统计 标签 菜单 关于布局我的页是五个 Builder 块纵向堆叠的个人中心标准范式build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.TagCard() 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) }5 块结构UserCard— 渐变品牌区展示身份与核心数据摘要StatRow— 三列统计卡用负 margin 悬浮在渐变卡下缘是本页最精巧的布局手法TagCard— 我的兴趣标签胶囊卡呼应兴趣页采集的画像数据MenuList— 5 行功能菜单个人中心的标配入口集合About— 底部版本信息收尾整页整个页面只有一个Scroll无顶部固定 Header——渐变 UserCard 本身就是头图这种头图式个人页设计在社交产品中非常常见如微信、探探。项目源码开源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(已匹配 24 人 · 好友 18).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({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })与首页今日匹配卡完全同款渐变135° 从粉到浅粉——品牌渐变贯穿首页与我的页全 App 视觉统一。半透明头像底64×64 圆形、#33FFFFFF约 20% 透明度白底 32 号 emoji。半透明设计在渐变背景上呈现磨砂玻璃质感比纯白底更高级。双行身份信息主行兴趣探索者18 号加粗白字副行已匹配 24 人 · 好友 1812 号白字 85% 透明度——用户名 数据摘要的经典组合。关键 padding底部bottom: 44预留大块空白为下方悬浮统计卡留出视觉呼吸空间配合 StatRow 的负 margin 使用。安全区顶部padding({ top: this.safeTop 30 })把渐变区推到状态栏之下。三、StatRow负 margin 悬浮统计卡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 }) }这可能是本页最值得学习的一段代码负 margin 实现悬浮.margin({ top: -24 })让白卡向上位移 24 像素恰好叠在渐变区底部预留的 44 空白上形成卡片悬浮于头图下缘的立体层次感——不依赖 absolute 定位纯用负边距完成是 ArkUI 的常见技巧。92% 宽度自居中卡片宽度 92%两侧各留 4% 呼吸边距比全宽更轻盈。ForEach 渲染统计数据来自private stats: StatItem[]17-21 行5 兴趣标签 / 24 匹配历史 / 18 好友三个 Column 用layoutWeight(1)等分。key 用 labelForEach以s.label作为 key兴趣标签/匹配历史/好友天然唯一。四、TagCard我的兴趣标签卡TagCard() { Column({ space: 10 }) { Text(我的兴趣标签).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.myTags, (t: string) { Text(# t).fontSize(12).fontColor(C.primary) .padding({ left: 12, right: 12, top: 6, bottom: 6 }).backgroundColor(C.primarySoft).borderRadius(14) .margin({ right: 10, bottom: 10 }) }, (t: string) t) }.width(100%) } .width(92%).padding(14).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }数据源private myTags: string[] [民谣, 摄影, 旅行, 篮球, 阅读]15 行——与兴趣页默认选中民谣/摄影/篮球 补选旅行/阅读完全对应构成在兴趣页采集 → 在我的页展示的闭环。胶囊样式12 号粉色文字 primarySoft浅粉底 圆角 14 #前缀与兴趣页选中态胶囊白字粉底形成展示态 vs 编辑态的区分设计语言统一且功能角色清晰。标题行14 号加粗我的兴趣标签为整卡定义内容。布局92% 宽度 margin({ top: 14 })与统计卡保持间距Flex自动换行排布 5 个胶囊。五、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: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }5 个菜单项23-29 行️ 兴趣标签 / 匹配历史 / 个人资料 / 隐私设置 / ⚙️ 通用设置。实现细节三栏行emoji18 号 标题14 号layoutWeight(1)占满中段 “” 箭头浅灰标准列表行结构。ForEach 的 index 参数回调第二参idx用于判断——idx this.menus.length - 1时在行后渲染Divider即最后一行不加分隔线符合移动端列表的视觉惯例。Divider 细线color(C.stroke)strokeWidth(0.5)的极细浅线弱化分隔、强化整体感。整行可点点击事件挂在整行 Row 上Toast 显示菜单名。卡片容器92% 宽度、圆角 14、描边与上方 TagCard 视觉对齐。六、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)进一步弱化版本号符合版本信息越低调越好的惯例真实应用中点击版本号常隐藏检查更新/开发者选项等彩蛋入口。七、跨页数据自洽我的页 全 App 数据总汇我的页是全 App 数据最密集的页面每一个数字都能在其他页面找到出处“5 兴趣标签”↔ 兴趣页 23 个胶囊中的选中集合默认 3 补选 2“24 匹配历史”↔ 匹配页统计卡24 匹配的人、UserCard已匹配 24 人“18 好友”↔ 匹配页12 已打招呼的转化结果打招呼 → 成为好友“#民谣 #摄影 #旅行 #篮球 #阅读”↔ 兴趣页默认选中的民谣/摄影/篮球 提示补选的旅行/阅读这种数字处处有出处的设计让整个 Demo 像一台自洽的小机器任何一个页面单独截图都经得起推敲这也是本系列文章反复强调的核心验收点。八、扩展思考个人中心页的可复用设计模式头图 悬浮卡负 margin 悬浮手法是轻量级层次感的通用解无需 zIndex 或绝对定位值得在任意个人页复用。数据漏斗叙事匹配的人 → 高契合度 → 已打招呼 → 好友构成完整转化漏斗个人页统计应尽量围绕业务漏斗组织而不是堆砌无意义数字。菜单项的未来形态5 个菜单当前全是 Toast真实产品中分别对应跳转子页标签管理、匹配记录、资料编辑、隐私开关、设置面板可在本页基础上直接扩展路由。状态持久化若把myTags改为从 Preferences 读取兴趣页保存后我的页即时更新体验闭环将彻底打通。头像可点击UserCard 的头像当前不可点产品化后可加更换头像入口——emoji 头像 → 上传真实头像的升级路径。九、实机截图与交互演示本节结合 4 张实机截图逐张还原我的页的视觉效果与交互过程。1. 我的页首屏渐变头图 悬浮统计 标签卡第一张截图是我的页默认首屏顶部是粉色渐变 UserCard——左侧 半透明圆形头像 64×64、右侧兴趣探索者18 号加粗白字与已匹配 24 人 · 好友 1812 号副信息下方白色统计卡以负边距悬浮在渐变区下缘显示5 兴趣标签 / 24 匹配历史 / 18 好友三个数字再往下是我的兴趣标签卡五个粉色胶囊#民谣 #摄影 #旅行 #篮球 #阅读依次排开。整页层次分明悬浮卡是视觉焦点。2. 点击匹配历史菜单弹出 Toast第二张截图演示了点击菜单第二行 匹配历史后的反馈弹出匹配历史Toast。五行的点击事件都挂载在整行 Row 上点击任意位置emoji、标题、箭头均可触发点击热区大、误触率低是移动端列表项的标准交互做法。3. 点击隐私设置菜单弹出 Toast第三张截图是点击菜单第四行 隐私设置后的反馈——Toast 显示隐私设置。菜单行之间以 0.5 宽度浅灰 Divider 分隔最后一行通用设置不带分隔线视觉上最后一项收尾的处理干净利落细节体现工程用心。4. 完整视图5 菜单 版本信息第四张截图是我的页完整视图五个菜单️ 兴趣标签 / 匹配历史 / 个人资料 / 隐私设置 / ⚙️ 通用设置全部可见最底部是校园兴趣匹配 / Version 1.0.0版本信息。从渐变头图到版本号五个区块在单屏内完整呈现无需滚动即可纵览个人中心的全部功能入口。十、扩展细节个人中心页面的状态与持久化设计我的页目前的头像、昵称、统计、标签全部来自静态数据真实产品中这些都应动态化用户模型集中管理将头像、昵称、标签、统计封装为统一的UserProfile模型通过全局AppStorage或状态管理库如 ohos/state-management 的 V2 状态注入页面我的页与兴趣页共享同一用户对象。Preferences 本地缓存用户修改标签后用ohos.data.preferences持久化到本地App 重启后自动回显——onPageShow时读取、保存时写入实现编辑一次、处处生效。云端同步真实场景应接入账号体系如鸿蒙的账号服务或自建后端我的页数据随账号云端同步换设备不丢数据这也是已匹配 24 人这类统计能够跨端一致的前提。菜单路由五个菜单当前都是 Toast产品化后应各自跳转子页——可用Navigation或router.pushUrl挂接真实页面菜单的 emoji 与标题即为子页面的图标与标题扩展成本极低。十一、扩展细节四 Tab 状态联动的设计蓝图如果把这四个页面当作一个整体最理想的状态设计是单一数据源 四处投影画像是圆心用户的所有标签集中存储如全局myTags: string[]兴趣页编辑它、我的页展示它——两页永远一致无需手动同步。匹配是派生数据匹配度、共同兴趣、统计数字都由我的标签 × 他人标签实时计算兴趣页每次保存标签匹配页的排序与共同兴趣立刻重算——从静态数组升级为计算属性是唯一改动。首页是摘要首页的今日最佳匹配卡、推荐列表本质是对匹配结果的 Top-N 摘要展示可共享匹配页的数据层只做不同的切片与排序。统一刷新机制用AppStorage的键值对或消息总线在四页之间广播画像已更新任意页面改动后其余页面onPageShow时自动重新读取即可实现教科书式的状态联动。十二、彩蛋细节与终评兴趣探索者昵称不叫用户 xxx而叫兴趣探索者用产品语境赋予用户身份感是社交产品人设化的小心机。 头像与 Tab 图标同款我的页 Tab 图标是 UserCard 头像也是 头像即品牌符号。半透明头像底#33FFFFFF20% 透明度在渐变上呈玻璃质感与首页 Progress 底环#44FFFFFF的透明度手法一脉相承——这套 Demo 系列钟爱半透明白叠渐变的质感方案。五个菜单 emoji 全配齐️⚙️ 五枚 emoji 覆盖标签/记录/资料/隐私/设置五个功能域图文并茂。About 区无描边区别于上方所有卡片About 区是裸文本视觉层级最低正确地退到页面末尾当背景板。我的页以 118 行代码完成了个人中心页的完整范式渐变头图、悬浮统计、标签回顾、菜单导航、版本收尾五区结构层次分明、数据全链路自洽。负 margin 悬浮卡是最值得抄走的技巧而数字处处有出处的数据设计则是最值得借鉴的产品思路。十三、常见问题与开发避坑个人中心页看似简单实际开发中踩坑率却很高以下几点务必注意负 margin 的层级问题margin({ top: -24 })让统计卡上移悬浮但它与渐变卡的叠放顺序取决于构建顺序后写的在上层。若想调整悬浮的上下层级需要配合zIndex显式控制否则不同机型的渲染顺序差异可能导致卡片被渐变区盖住一部分。渐变区的圆角缺失UserCard 的渐变背景是linearGradient但本身没有设置圆角左右边缘是直角贴边设计。如果产品想要圆角头图需在渐变外层包一个borderRadius容器并配合clip如clip(true)裁切否则圆角与渐变会分层露出白角。半透明色的 alpha 值换算#33FFFFFF中的 33 是十六进制 alpha约 20%不要想当然写成 CSS 的 0.33 语法同理首页 Progress 底环的#44FFFFFF约 26.7%。ArkUI 颜色一律是#AARRGGBB格式alpha 在前。ForEach 第三参的陷阱ForEach(arr, builder, (item, index) key)中若 key 依赖 index如${item.id}-${index}列表重排会导致 key 全变、节点全重建——本页菜单用m.title作 key 正确规避了此问题。Divider 与 ForEach 的混排if (idx len - 1) { Divider() }写在 ForEach 构建函数内是合法写法但注意 Divider 必须要有明确父容器宽度否则可能撑满全屏而非卡片宽度——本页 Divider 位于 92% 宽卡片内部行为正确。十四、系列横向对比个人中心的五种头图风格我的页的头图设计直接决定整个个人中心的质感本系列各 App 提供了五种可对照的风格方案风格代表 App头图形式氛围渐变头图 悬浮卡App 39粉色渐变 负边距统计甜美活力纯色品牌头App 37考试红标题区严肃正式浅色卡片头App 34草绿图标区清新轻量图标居中头App 32晴空蓝 大图标简洁直观大图头App 36琥珀橙横幅温暖饱满App 39 的渐变头图 负边距悬浮卡是五种方案中最有层次感的一种渐变区提供情绪基调悬浮卡制造立体错位标签卡与菜单卡依次下探整页如同一张精心排版的名片。这种风格在保持代码轻量仅 118 行的同时实现了接近定制设计的视觉完成度是资源有限的小团队快速做出高级感个人中心的性价比之选。若未来要升级可在此结构上叠加横幅背景 模糊遮罩 圆角切角等进阶手法但现有范式已经足够撑起一个完整的校园兴趣社交产品的门面。十五、FAQ关于我的页的常见疑问Q1负 margin 悬浮卡会不会在深色模式下出错不会。负 margin 是布局机制与颜色无关深色模式只需让C.card切换为深色值即可。唯一要注意的是悬浮卡与渐变区要有足够的色彩对比白卡 × 粉渐变若主题色换深记得同步调整卡片底色。Q2已匹配 24 人 · 好友 18与统计卡的24 匹配历史 / 18 好友重复吗不重复是摘要 明细关系UserCard 副标题是顶部摘要统计卡是下方明细展开。摘要抓眼球、明细供核对这是个人页的常见信息分层用户不会觉得啰嗦反而觉得数据对得上。Q3五个菜单项为什么都用 Toast 而不是跳转原型阶段用 Toast 占位交互成本最低、反馈最快。产品化时每个菜单对应一个子页面标签管理、匹配记录、资料编辑、隐私设置、设置面板把onClick里的 Toast 换成router.pushUrl即可其余代码不动——菜单结构已为路由预留好全部参数标题即页面名。Q4我的页没有顶部固定 Header滚动时会不会突兀不会。渐变 UserCard 本身就是头图滚动时内容从渐变区下方自然滑出这是社交产品微信/探探的成熟范式。若想要滚动后浮现标题栏的效果可用Scroll的onScrollIndex监听 透明度渐变实现属于进阶美化。Q5版本号可以点击吗当前不可点。产品化时可在About的版本号上挂onClick连续点击 5 次弹出开发者选项或跳转检查更新页——这是移动端约定俗成的彩蛋入口一行代码即可实现。Q6为什么头像用 而不是用户照片emoji 头像零资源、零网络、跨端一致还天然契合兴趣匹配的轻松调性更重要的是它暗示头像 兴趣符号的产品设定首页用户的 同理。真实产品接入拍照/相册上传后头像容器结构无需改变只需把内部 emoji 换成Image。十六、一句话总结我的页是个人中心范式的完整样本渐变头图定基调、负边距悬浮卡造层次、标签卡回顾画像、菜单卡收纳入口、版本号收尾。118 行代码把五种区块有机组合且每个数字都能在其他页面找到出处——这种数据处处自洽的严谨正是它从一堆 Demo 页中脱颖而出的原因。收尾再谈一个容易被忽略的工程细节我的页的Scroll容器没有设置scrollBar但 ArkUI 默认会显示细滚动条——本页所有区块在单屏内即可完整呈现实际并不产生滚动因此滚动条从未出现观感干净。若未来内容变长需要滚动记得显式设置scrollBar(BarState.Off)保持视觉统一或在onScrollIndex中做滚动即隐藏滚动条的优化。另外五区之间的间距节奏14/24 两档与圆角体系20/14/10全部来自D常量与全 App 保持一致——个人中心作为最后一个 Tab往往最容易被潦草收尾而本页用同等质量标准完成反而成为整套 App 完成度最均匀的一页。