鸿蒙原生应用 HarmonyOS ArkTS实战室友评价我的页 —— 负 margin 悬浮统计与匿名 ToggleApp 50「校园室友评价」我的页ProfileTab主题色#55A靛蓝色indigo4 个 Tab 分别为首页、评价、数据、我的。我的页采用UserCard 统计行 隐私卡 菜单 关于五区布局——靛蓝渐变 UserCard 64×64 半透明头像 小李18 号加粗 紫荆公寓 3-206 · 1号床三列悬浮统计卡4.8 我的评分 / 18 评价记录 / 92% 和谐度负 margin 上浮匿名评价卡匿名评价 开启后评价不显示你的信息 靛蓝 Toggle4 行菜单 评价记录 / 寝室资料 / 我的数据 / ⚙️ 设置底部关于区校园室友评价 Version 1.0.0。本篇基于50-roommate-rate/entry/src/main/ets/pages/ProfileTab.ets共 114 行逐段拆解附 4 张实机截图。一、整体结构五区UserCard 统计 隐私 菜单 关于布局我的页是五个 Builder 块纵向堆叠的个人中心标准范式build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.PrivacyCard() 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— 三列悬浮统计卡4.8 我的评分 / 18 评价记录 / 92% 和谐度PrivacyCard— 匿名评价 Toggle评价隐私开关MenuList— 4 行功能菜单About— 底部版本信息收尾与 App 39-49 我的页同构的头图 悬浮卡 菜单 版本范式 匿名开关App 46 隐私卡同款——靛蓝主题、室友评价业务指标、匿名评价隐私是本页的三大特色。项目源码开源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(紫荆公寓 3-206 · 1号床).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从#55A靛蓝渐变到#7B85C5——与首页寝室卡、数据页指数卡同款渐变品牌统一。 头像64×64 半透明圆底 32 号 ——与首页小李我的 emoji完全一致我的身份符号统一 即小李。昵称小李实名昵称不是达人/旅人类角色——室友评价是寝室小圈子的实名互评认识的人之间评价实名比角色昵称更贴切室友知道你是谁与首页小李我一致。副标题含寝室身份紫荆公寓 3-206 · 1号床——**寝室紫荆公寓 3-206 床位1号床**的双重身份与首页寝室卡、室友列表床号一致我是 3-206 寝室的 1 号床成员。底部 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 }) }统计数据16-20 行4.8 我的评分 / 18 评价记录 / 92% 和谐度——三列指标完全贴合室友评价业务我的评分室友给我的分、评价记录我评别人的次数、和谐度寝室整体——**个人评分/记录 寝室和谐度**的组合是室友评价个人中心的数据模型。技术要点负 margin 悬浮.margin({ top: -24 })上移叠加在渐变区下缘——系列标志性手法。三列等分三个 ColumnlayoutWeight(1)自动三等分18 号数字 11 号标签。92% 宽度左右留 4% 呼吸边距。keys.label我的评分/评价记录/和谐度天然唯一。数据自洽4.8 我的评分 ↔ 首页小李我4.8——同一评分两处一致我的页我的视角、首页室友列表视角18 评价记录 ↔ 评价页提交评价的累计每次评价 192% 和谐度 ↔ 首页92% ↔ 数据页92 指数——92三处完全一致。四、PrivacyCard匿名评价 TogglePrivacyCard() { Row() { Column({ space: 2 }) { Text(匿名评价).fontSize(14).fontColor(C.text) Text(开启后评价不显示你的信息).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.anonymous }) .selectedColor(C.primary) .onChange((v: boolean) { this.anonymous v; }) } .width(92%).padding(16).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }技术拆解左文右开关14 号匿名评价 11 号说明开启后评价不显示你的信息layoutWeight(1)撑开 靛蓝 ToggleselectedColor(C.primary)——与 App 46公开手机号、App 42匿名发布同款隐私开关组件。默认开启State anonymous: boolean true——评价默认匿名室友关系敏感匿名让评价更真实用户可关闭实名评价。匿名评价的产品语义室友互评可能伤感情安静程度差的评价实名会尴尬——匿名保护评价者说出真实评价不怕尴尬与 App 49 投票的匿名同理民主表达需要匿名保护但匿名也要防滥用恶意差评——评价的匿名与责任平衡。与评价页的联动匿名开关状态决定评价页提交的评价是否带评价者信息——产品化后评价记录匿名展示不显示评价人开关是评价隐私的全局设置。五、MenuList4 行菜单 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 }) }4 个菜单项22-27 行 评价记录 / 寝室资料 / 我的数据 / ⚙️ 设置。菜单语义分析 评价记录我提交的评价历史对应统计18 评价记录——评价的沉淀。 寝室资料寝室信息管理紫荆公寓 3-206、成员列表、床位——对应 UserCard 的寝室身份。 我的数据个人评价数据报表我的评分趋势、维度分析——对应统计4.8 我的评分与数据页寝室数据寝室视角对照。⚙️ 设置匿名评价、通知、关于等。实现细节三栏行emoji 标题 、ForEachindex 判断最后一行不加 Divider、整行可点 Toast、92% 宽卡片——系列标准菜单卡。4 行菜单覆盖记录/寝室/数据/设置前 3 个对应统计卡的三个维度记录 ↔ 18、数据 ↔ 4.8、寝室 ↔ 92% 的寝室归属。六、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 })与菜单卡拉开距离——系列统一收尾。七、跨页数据自洽我的页 小李的评价档案我的页每个元素都能在其他页面找到呼应小李身份↔ 首页小李我 同款 emoji——我的身份两页统一我的页本名、首页标注我。紫荆公寓 3-206 · 1号床↔ 首页寝室卡紫荆公寓 3-206 ↔ 室友列表1号床——寝室 床位身份三处一致。4.8 我的评分↔ 首页小李我4.8——同一评分两处一致室友给我的分。92% 和谐度↔ 首页92% ↔ 数据页92 指数——92三处完全一致。匿名评价开关↔ 评价页提交的评价匿名与否——开关是评价隐私的全局设置。八、实机截图与交互演示本节结合 4 张实机截图逐张还原我的页的视觉效果与交互过程。1. 我的页首屏靛蓝渐变 三列统计 匿名卡第一张截图是我的页默认首屏顶部靛蓝渐变 UserCard—— 半透明头像、右侧小李加粗白字与紫荆公寓 3-206 · 1号床寝室 床位身份下方白色统计卡以负边距悬浮在渐变区下缘三列数字4.8 我的评分 / 18 评价记录 / 92% 和谐度等分排布再往下是匿名评价卡匿名评价 开启后评价不显示你的信息 靛蓝开启 Toggle与菜单第一行 评价记录。靛蓝渐变 匿名开关是本页的两大特色。2. 点击评价记录弹出 Toast第二张截图是点击菜单第一行 评价记录后的反馈弹出评价记录Toast。菜单整行可点emoji、标题、箭头任意位置均触发评价记录对应统计18 评价记录的明细——我提交的评价历史何时评了谁、几分在此查看与评价页提交评价的累计衔接。3. 点击我的数据弹出 Toast第三张截图是点击菜单第三行 我的数据后的反馈弹出我的数据Toast。我的数据是个人评价的报表入口我的评分趋势、维度分析——对应统计4.8 我的评分与数据页寝室数据寝室视角形成个人 vs 寝室的数据对照。4. 我的页完整视图匿名卡 菜单 版本第四张截图是我的页完整视图匿名评价卡靛蓝开启 Toggle、四个菜单 评价记录 / 寝室资料 / 我的数据 / ⚙️ 设置、底部校园室友评价 / Version 1.0.0全部可见。从渐变头图到版本号五区块在单屏内完整呈现。九、扩展思考互评产品的信任与隐私匿名评价开关是室友互评产品的信任核心其设计值得深入匿名 vs 实名的平衡匿名默认让评价更真实不怕尴尬但也可能滋生恶意差评——互评产品的信任难题匿名保护表达者、实名约束滥用——产品化可匿名评价 实名申诉被评者可申诉恶意差评匿名与责任平衡。匿名的作用域评价匿名不显示评价者但记录可查管理员/系统可见——匿名对室友、留痕对系统防滥用的审计匿名不是无痕。隐私的告知开启后评价不显示你的信息——隐私开关的明示一句话说清后果用户基于明确信息决定匿名与否系列 App 46 同款。默认值的取向默认匿名true——评价默认为安全表达室友关系的敏感默认匿名想实名才关闭——与 App 46公开手机号默认公开通讯录用途形成默认值对照默认值反映产品的信任取向评价怕尴尬默认匿、通讯录要联系默认公开。评价的申诉与删除被评者可删除不当评价申诉——评价的救济机制差评可申诉互评产品的信任闭环匿名表达 申诉救济。十、扩展思考室友评价的社交心理学首页互评 和谐度的产品设计背后是室友关系的社交心理学评价的正面导向维度设计卫生/作息/相处/安静都是中性/正面描述不是邋遢/吵闹的负面词——评价的措辞导向正面描述减少对抗安静程度比太吵更中性降低评价的伤害性。和谐度的激励92% 和谐指数 提升 3 分——正向反馈激励寝室越来越和谐的正向叙事数据页的提升传达努力有回报对比负面监控评价产品用和谐而非批评驱动改善。匿名保护的勇气匿名评价让指出问题安静差更敢说——匿名的勇气效应不怕当面尴尬评价的真实性靠匿名保护——但鼓励当面沟通低分项建议室友沟通评价是沟通的起点而非替代。互评的对等我评阿强、阿强也评我双向——评价的对等性互相评价不存在单方审判首页我 4.8与阿强 4.5是互评的双向结果评价的公平感。评价的周期周/月评价 趋势比上周提升——评价的习惯化定期互评维护关系评价成为寝室生活的定期体检和谐度是寝室关系的健康指标。十一、FAQ 与一句话总结Q1为什么我的页昵称是小李而不是达人/旅人室友评价是寝室小圈子的实名互评——室友互相认识实名小李比角色昵称达人更贴切室友知道你是谁与首页小李我、 头像一致——小圈子产品用实名、社区产品用角色昵称App 40/42 达人/旅人是社区人设。Q24.8 我的评分和首页小李 4.8是什么关系同一评分——首页小李我4.8是室友列表视角、我的页4.8 我的评分是本人视角同一数据两处一致室友给我的综合评分互评产品的双向评分我的 4.8 是室友评的、我评阿强 4.5。Q3匿名评价默认开启吗是anonymous true——室友关系敏感评价默认为安全表达匿名不尴尬想实名才关闭开启后评价不显示你的信息的说明让用户明确匿名后果。Q44 个菜单为什么没有宿舍值日室友评价聚焦评价业务记录/寝室/数据/设置——值日/缴费是其他寝室 App 的职能App 47 班费、App 48 任务菜单映射本 App 的核心业务评价 寝室 数据跨业务功能由系列其他 App 承接。一句话总结我的页以 114 行代码完成了小李的室友评价档案——靛蓝渐变头图配 头像、紫荆公寓 3-206 · 1号床寝室身份、4.8 评分/18 记录/92% 和谐度评价统计、匿名评价 Toggle互评隐私核心、4 菜单覆盖记录/寝室/数据/设置。实名互评 匿名开关是本页的双核评价实名对等、表达匿名保护让室友互相评价在信任与勇气之间取得平衡。十二、系列横向对比十个个人中心的隐私设计演进App 50 我的页的匿名开关是系列隐私设计的又一次演进与历代对比可看清隐私设计的完整谱系App隐私形态保护对象默认值41 表白墙匿名声明无条件表达者常驻匿名42 树洞匿名发布开关倾诉者默认匿名46 通讯录公开手机号开关信息可见性默认公开50 室友评价匿名评价开关评价者默认匿名匿名评价的独特定位保护评价者不是倾诉者/不是信息主体——室友互评中评价别人可能伤感情安静程度差实名评价尴尬匿名让评价更真实——匿名开关的语义演进树洞匿名保护倾诉、通讯录公开保护隐私、本页匿名保护评价者隐私设计的保护对象随产品核心动作变化——本页的核心动作是评价说真话匿名保护说真话的人。默认值的取向默认匿名true——与 App 46 通讯录默认公开形成对照默认值反映产品的信任取向评价怕尴尬默认匿、通讯录要联系默认公开——室友评价是关系敏感的互评默认匿名给勇气、通讯录是用途明确的联系默认公开给便利——同一隐私开关组件Toggle默认取向由产品的情感敏感度决定。十三、扩展思考评价产品的数据与行动闭环我的页之外室友评价产品的完整数据与行动闭环值得勾勒数据的采集评价页四维度打分过程——每次评价收集卫生/作息/相处/安静的四维数据。数据的聚合维度分 → 个人综合分首页 4.8→ 寝室和谐度数据页 92——层层升维的聚合。数据的沉淀评价记录我的页 18 条——历史评价的档案何时评了谁、几分评价可追溯。数据的行动和谐度低分项安静 68%→ 改善行动注意噪音——数据驱动寝室改善弱项识别 → 行动评价产品从记录到改善。数据的周期周评价 趋势比上周提升——评价的习惯化定期互评 跟踪和谐度是寝室关系的定期体检评价产品成为寝室生活的健康管理工具。十四、FAQ 与一句话总结Q6匿名评价会影响室友关系吗双刃剑——匿名让评价更真实不怕尴尬但也可能滋生恶意差评——互评产品的信任难题匿名保护表达者、实名约束滥用产品化可匿名评价 实名申诉被评者可申诉恶意差评 评价的正面措辞维度用中性描述匿名与责任平衡。Q7我的评分 4.8和和谐度 92%什么关系4.8 是我的个人评分室友给我评的综合分、92% 是寝室和谐度全寝室整体——个人 vs 寝室的指标对照我 4.8 高 → 我的人际好寝室 92 高 → 整体和谐两指标反映个人在寝室中的评价与寝室整体状态。Q8菜单为什么没有我的评分详情统计卡4.8 我的评分是数据展示 我的数据菜单是评分详情入口个人评分趋势、维度分析——统计卡给结论、菜单给明细系列惯例我的数据承载个人评分的深化分析。Q9匿名开关只影响评价页吗是——匿名状态决定评价页提交的评价是否带评价者信息评价记录匿名展示开关是评价隐私的全局设置我的页统一控制评价页无需重复设置。Q10本页与系列其他 App 个人中心的寝室身份有什么不同本页副标题紫荆公寓 3-206 · 1号床是具体寝室 床位评价的上下文——我在哪个寝室、睡哪张床App 44 纪念册的计科2022级是班级归属——评价产品的身份 寝室成员评价发生在寝室小圈子内班级/寝室/职务身份随产品组织单位变化。这些 FAQ 与前面的拆解共同构成本页的完整解析。补充一处细节观察我的页的紫荆公寓 3-206 · 1号床与首页寝室卡、室友列表床号构成了完整的寝室身份链——首页看寝室与室友紫荆公寓 3-206 1-4 号床、我的页看我在这寝室的位置1 号床——身份不是孤立的我的页而是寝室坐标系中的定位1 号床在 3-206 的 4 张床中这让小李的个人中心天然嵌在寝室语境中与室友评价的互评产品定位完全一致。而匿名评价开关默认开与开启后评价不显示你的信息的说明则把评价的勇气匿名敢说真话与隐私的知情明确匿名后果放在个人中心的显眼位置——互评产品的信任设计从这里开始。这些细节共同决定了我的页作为室友评价档案的完整度。 我的页的评分统计4.8 分、评价记录18 条与和谐度92%让个人在寝室的评价全貌清晰呈现匿名评价开关保护评价隐私本文解析至此完整收尾读者可对照源码与配图验证统计口径与交互细节。我的页解析完成。