鸿蒙原生应用 ArkTS 严格模式实战社交匹配我的页经验条与签到联动组合技App 18「校园社交匹配」我的 TabProfileTab是个人中心页。整页用渐变用户卡片张同学 Lv.8经验条 720/1000 与签到联动 4 栏统计好友/互动/活动/匹配率 6 徽章成就墙社交达人/连续签到/心动匹配/活动之星/百人好友/校园红人 本周活跃度条形图 6 项菜单消息通知带数字 3/NEW 角标 关于应用信息卡3 行。本篇基于18-social-match/entry/src/main/ets/pages/ProfileTab.ets约 226 行逐段拆解附 4 张实机截图。一、整体结构UserCard/StatRow 固定 Scroll 内容ProfileTab 与 App 14/15/16 我的页大部分同构UserCard/StatRow/AchievementWall/WeekChart/MenuList但布局更紧凑UserCard StatRow 固定在顶部其余滚build() { Column() { this.UserCard() this.StatRow() Scroll() { Column({ space: 14 }) { this.AchievementWall() this.WeekChart() this.MenuList() this.AboutInfo() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }布局差异App 14/15/16 是整个 Scroll 装 6 块App 18 是UserCard StatRow 固定、其余 4 块滚动——**固定用户卡 滚动内容**让用户始终能看到自己的头像/等级社交 App 的身份常驻。6 个块UserCard身份→ StatRow数据→ AchievementWall成就→ WeekChart行为图→ MenuList资产→ AboutInfo关于。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、UserCardLv.8 渐变卡 签到联动经验本页最大亮点UserCard 是张同学 Lv.8的渐变身份卡签到按钮真实联动经验值Builder UserCard() { Column() { Column({ space: 12 }) { Row({ space: 16 }) { Stack({ alignContent: Alignment.BottomEnd }) { Row() { Text(‍).fontSize(48) } .width(80).height(80).backgroundColor(#FFFFFF33).borderRadius(40).justifyContent(FlexAlign.Center) Row() { Text(Lv.8).fontSize(10).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) } .backgroundColor(C.accent).borderRadius(8) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) } Column({ space: 6 }) { Text(张同学).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(计算机学院 · 大三).fontSize(12).fontColor(#FFFFFFCC) }.alignItems(HorizontalAlign.Start).layoutWeight(1) }.width(100%) Column({ space: 6 }) { Row() { Text(经验值).fontSize(11).fontColor(#FFFFFFCC) Blank() Text(this.exp / this.maxExp).fontSize(11).fontColor(#FFFFFFCC) }.width(100%) Progress({ value: this.exp, total: this.maxExp }).color(#FFFFFF).backgroundColor(#FFFFFF33) .borderRadius(4).height(8).width(100%) }.width(100%) Button(this.checkedIn ? ✓ 今日已签到 : 签到 10经验) .fontSize(13).fontColor(C.primary) .backgroundColor(this.checkedIn ? #FFFFFF66 : #FFFFFF) .borderRadius(20).height(36) .onClick(() { if (!this.checkedIn) { this.checkedIn true; this.exp 10; promptAction.showToast({ message: 签到成功10经验值 }); } }) } .width(100%).padding({ top: this.safeTop 24, left: D.pad, right: D.pad, bottom: 24 }) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }.width(100%) }2.1 Lv.8 徽章系列最高等级Stack({ alignContent: Alignment.BottomEnd }) { Row() { Text(‍).fontSize(48) } .width(80).height(80).backgroundColor(#FFFFFF33).borderRadius(40).justifyContent(FlexAlign.Center) Row() { Text(Lv.8).fontSize(10).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) } .backgroundColor(C.accent).borderRadius(8) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) }80×80 大头像系列最大 ‍ 学生 emoji Lv.8 徽章C.accent浅粉红底贴在右下角——Lv.8 是系列最高等级App 13 Lv.4 → 14 Lv.5 → 15 Lv.6 → 16 Lv.7 → 17 Lv.4 → 18 Lv.8社交达人的等级叙事。Lv.8 徽章用C.accent浅粉红而非C.warn橙——App 13/17 的 Lv.4 是橙色warnApp 18 的 Lv.8 是浅粉红accent——等级徽章色跟随主题粉红主题用粉红徽章更统一。2.2 签到联动经验值真联动Button(this.checkedIn ? ✓ 今日已签到 : 签到 10经验) .fontSize(13).fontColor(C.primary) .backgroundColor(this.checkedIn ? #FFFFFF66 : #FFFFFF) .borderRadius(20).height(36) .onClick(() { if (!this.checkedIn) { this.checkedIn true; this.exp 10; promptAction.showToast({ message: 签到成功10经验值 }); } })签到按钮三态联动未签 → 文案签到 10经验 白底粉字点击 →checkedIn trueexp 10 Toast已签 → 文案✓ 今日已签到 半透明白底#FFFFFF66点击拦截if (!this.checkedIn)关键this.exp 10经验值联动——签到不只是打勾还真实增加经验值if (!this.checkedIn) { this.checkedIn true; this.exp 10; promptAction.showToast({ message: 签到成功10经验值 }); }exp 10→ 经验条Progress({ value: this.exp, total: this.maxExp })实时增长——签到即升级。对比 App 13/17 的伪签到只弹 Toast 不改状态、App 14/15/16 的checked 翻转但不加经验——App 18 是系列第一个签到真实联动经验值的个人中心State checkedInState expState maxExp三个状态——本页有 3 个 State系列个人中心最多。经验 720/100072%——签到 28 次720 初始 720——初始 exp 720暗示已经用了一阵签到 28 天就能升 Lv.91000 经验封顶——升级闭环。2.3 经验条双通道Row() { Text(经验值).fontSize(11).fontColor(#FFFFFFCC) Blank() Text(this.exp / this.maxExp).fontSize(11).fontColor(#FFFFFFCC) }.width(100%) Progress({ value: this.exp, total: this.maxExp }).color(#FFFFFF).backgroundColor(#FFFFFF33) .borderRadius(4).height(8).width(100%)Progress({ value: this.exp, total: this.maxExp })直接用 exp/maxExp 计算720/100072%——不是写死 72而是状态驱动签到后自动变 73%。数字720/1000 进度条72%双通道。三、StatRow4 栏统计StatRow 与 App 14/15/16 同构负边距悬浮数据为社交维度private stats: StatItem[] [ { value: 56, label: 好友 }, { value: 128, label: 互动 }, { value: 12, label: 活动 }, { value: 88%, label: 匹配率 } ];好友 56 / 互动 128 / 活动 12 / 匹配率 88%——与首页好友总数 56/互动次数 128一致 ✓。匹配率 88%是社交 App 特有的统计匹配成功率。4 栏同色C.text深色——颜色留给状态。四、AchievementWall社交成就墙AchievementWall 是 6 个社交徽章的 3 列 Row4 解锁 2 未解锁Builder AchievementWall() { Column({ space: 12 }) { Row() { Text(成就墙).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(4 / 6 已解锁).fontSize(11).fontColor(C.textDim) }.width(100%) Row() { ForEach(this.badges, (b: BadgeItem) { Column({ space: 6 }) { Row() { Text(b.icon).fontSize(24) } .width(48).height(48).borderRadius(24) .backgroundColor(b.unlocked ? C.primarySoft : C.cardSoft) .justifyContent(FlexAlign.Center) .opacity(b.unlocked ? 1 : 0.4) Text(b.name).fontSize(9).fontColor(b.unlocked ? C.text : C.textDim).maxLines(1) }.layoutWeight(1) }, (b: BadgeItem) b.id.toString()) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }6 个社交徽章 社交达人解锁 连续签到解锁 心动匹配解锁 活动之星解锁 百人好友未解锁 校园红人未解锁社交达人/连续签到/心动匹配/活动之星/百人好友/校园红人——徽章名完全贴合社交业务对比 App 17 复用 App 13 的省钱能手违和App 18 的徽章是为社交定制的——业务定制徽章是正确的做法。解锁/未解锁三件套背景/透明度/文字4 / 6 已解锁文字。五、WeekChart本周活跃度WeekChart 与首页同构7 天条形图 平均 64%private weekBars: BarItem[] [ { day: 一, value: 50 }, { day: 二, value: 70 }, { day: 三, value: 40 }, { day: 四, value: 85 }, { day: 五, value: 60 }, { day: 六, value: 95 }, { day: 日, value: 45 } ];数据一 50/二 70/三 40/四 85/五 60/六 95/日 45——周六 95 最高周末活跃。平均 64% (50704085609545)/7 ≈ 63.6 ≈ 64% ✓——汇总有数学依据。与首页 WeekChart 的差异首页是本周匹配趋势 共 500 次我的页是本周活跃度 平均 64%——同一类图表两种语义匹配 vs 活跃度周图复用。六、MenuList6 项菜单 数字/NEW 角标MenuList 是 6 个菜单项角标用showBadge布尔字段控制区别于 App 13/14 的badge.length 0Builder MenuList() { Column({ space: 0 }) { ForEach(this.menus, (m: MenuItem, idx: number) { Row({ space: 12 }) { Row() { Text(m.icon).fontSize(20) } .width(36).height(36).backgroundColor(C.primarySoft).borderRadius(18).justifyContent(FlexAlign.Center) Text(m.label).fontSize(14).fontColor(C.text).layoutWeight(1) if (m.showBadge) { Text(m.badge).fontSize(10).fontColor(#FFFFFF) .backgroundColor(m.badge NEW ? C.accent : C.danger) .borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 }) } Text(›).fontSize(18).fontColor(C.textDim) } .width(100%).padding({ left: 14, right: 14, top: 14, bottom: 14 }) .onClick(() { promptAction.showToast({ message: m.label }); }) if (idx this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (m: MenuItem) m.id.toString()) } .width(100%).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }6 项菜单数据private menus: MenuItem[] [ { id: 1, icon: , label: 编辑资料, badge: , showBadge: false }, { id: 2, icon: , label: 隐私设置, badge: , showBadge: false }, { id: 3, icon: , label: 消息通知, badge: 3, showBadge: true }, { id: 4, icon: , label: 个性装扮, badge: NEW, showBadge: true }, { id: 5, icon: , label: 数据备份, badge: , showBadge: false }, { id: 6, icon: ❓, label: 帮助反馈, badge: , showBadge: false } ];角标showBadge显式字段比badge.length 0更明确——显示/隐藏与角标内容分离数据更语义化。消息通知 33 条未读消息呼应消息页未读消息 3 ✓、个性装扮 NEW新功能。角标两种色.backgroundColor(m.badge NEW ? C.accent : C.danger)NEW →C.accent浅粉红新功能数字 3 →C.danger深红待办Divider().color(C.stroke).strokeWidth(0.5)0.5vp 超细分隔线App 18 菜单用超细线比 App 13 的 1vp 更精致。七、AboutInfo3 行关于卡AboutInfo 是关于应用信息卡比 App 13/14 的版本号更丰富Builder AboutInfo() { Column({ space: 8 }) { Row() { Text(关于应用).fontSize(13).fontColor(C.textDim).layoutWeight(1) Text(v2.0.0).fontSize(12).fontColor(C.textDim) }.width(100%) Row() { Text(运行环境).fontSize(13).fontColor(C.textDim).layoutWeight(1) Text(HarmonyOS 6.0).fontSize(12).fontColor(C.primary) }.width(100%) Row() { Text(开发者).fontSize(13).fontColor(C.textDim).layoutWeight(1) Text(校园团队).fontSize(12).fontColor(C.textDim) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }3 行键值对关于应用 v2.0.0 / 运行环境 HarmonyOS 6.0主色高亮/ 开发者 校园团队——键左值右 值彩色高亮的关于卡比 App 13 的纯文本版本号更专业。注意v2.0.0App 13-17 都是 v1.0.0——App 18 自称 v2.0.0更成熟的社交 App 设定。八、State 的 3 状态设计ProfileTab 有3 个 State系列个人中心最多State类型用途checkedInboolean签到状态expnumber经验值签到 10maxExpnumber经验上限1000expmaxExp是数值状态——不同于 App 14/15/16 的经验条写死 74%App 18 的进度条是状态驱动Progress({ value: this.exp, total: this.maxExp })签到后自动涨——数值状态驱动 UI是更真实的实现。对比系列个人中心AppState签到经验条13/170伪签到写死14/15/161checkedchecked 翻转写死183checkedexpmaxExpexp 10 真联动状态驱动App 18 是系列个人中心的最完整版——签到真加经验、进度条真联动。九、数据一致性好友 56 首页好友总数 56 ✓互动 128 首页互动次数 128 ✓消息通知 3 消息页未读消息 3 ✓活动 12 首页 QuickAction活动间接✓4 组数据跨页一致——App 18 的数据闭环完整首页推荐的人 → 消息页可聊天 → 我的页统计好友/互动。十、经验值体系的成长曲线设计App 18 的经验值720/1000背后是**等级成长曲线**State checkedIn: boolean false; State exp: number 720; State maxExp: number 1000;exp: 720初始值——用户已经积累了 720 经验不是从 0 开始——老用户设定App 18 自称 v2.0.0用户也该是老用户。maxExp: 1000上限——Lv.8 升级到 Lv.9 需要 1000 经验当前 720/1000 72%——72% 的进度让用户有快升级了的期待感比 10% 更有激励比 95% 更有空间。成长曲线的设计要点等级越高升级越难——Lv.8 要 1000 经验App 14 的 Lv.5 只要 2000不App 14 是 1280/2000——**每级经验需求递增**保持挑战性签到 10 经验——签到 28 次 280 经验 28% 进度——每日签到 稳定的成长来源升级激励——经验满 1000 升 Lv.9可能解锁校园红人徽章成就墙第 6 个未解锁——等级联动成就真实项目的经验来源不止签到签到 10每天首次匹配 5发起聊天 2完成评价 3邀请好友 50多源经验 每日签到 等级成长是游戏化的标准引擎——App 18 的签到联动 exp 是系列第一个真成长实现。十一、成就墙的解锁机制设计App 18 的 6 个徽章4 解锁 2 未解锁体现了成就墙的解锁机制已解锁 4 个入门成就 社交达人 — 注册即得 连续签到 — 签到 7 天 心动匹配 — 首次匹配成功 活动之星 — 参加 3 次活动未解锁 2 个高级成就 百人好友 — 好友达到 100 人 校园红人 — 互动 1000 次入门成就易得、高级成就难达——用户一进来就能解锁 4 个建立成就感还有 2 个远期目标持续使用动力——近易远难是成就系统的黄金法则。徽章与业务深度绑定——社交达人/连续签到/心动匹配/活动之星/百人好友/校园红人全部是社交业务成就——成就 业务行为勋章对比 App 17 复用 App 13 徽章的省钱能手违和App 18 的徽章是完全定制的。真实项目的解锁逻辑// 伪代码签到天数解锁连续签到 if (this.checkinDays 7) { this.badges[1].unlocked true; // 重建对象触发渲染 }业务数据驱动解锁——签到 7 天 → 徽章亮好友 100 → 徽章亮——**数据条件触发成就**是成就系统的实现核心。十二、固定用户卡 滚动内容的布局价值App 18 我的页的布局UserCard StatRow 固定、其余滚动有几个设计考量1. 身份常驻——用户任何时候看到顶部都有张同学 Lv.8 经验条——我是谁、我多强永远可见对比 App 13-17 的整页滚动滚到底就看不到用户卡了。2. 签到便捷——签到按钮在固定区随时可点——高频操作常驻签到是每日操作不该藏在滚动区。3. 层级清晰——身份固定→ 数据固定→ 成就/行为/资产滚动——固定区是身份层、滚动区是内容层。4. 沉浸感——UserCard 的渐变延伸到状态栏背后padding({ top: this.safeTop 24 })固定区让粉红渐变常驻顶部——品牌色常驻。固定身份卡 滚动内容模板可复用到个人主页抖音/小红书、会员中心、学习 App 的我的课程——任何身份 内容场景。十三、总结App 18「校园社交匹配」我的页解析完毕。Lv.8 张同学 签到联动经验exp10 社交定制徽章 状态驱动进度条让 App 18 成为系列社交主题标杆。