鸿蒙原生应用实战HarmonyOS 6.0下表白墙互动页赞/评论/回复三分段消息流App 41「校园表白墙」互动页Func2Tab主题色#FF4757红色red4 个 Tab 分别为首页、发布✍️、互动、我的。互动页采用Header 消息流两区布局——白色双行 Header互动消息20 号加粗 收到的赞 / 评论 / 回复三分段选中紫色加粗4 条互动消息❤️ 赞了你的表白 / 评论了你 / ❤️ 赞了你的评论 / ↩️ 回复了你每条含 42×42 浅红圆形 emoji 图标 匿名同学 动作类型 时间三行头 单行摘要 缩进 Divider 分隔。每条消息展示谁 做了什么 内容摘要 何时点击弹动作类型 Toast。本篇基于41-confession-wall/entry/src/main/ets/pages/Func2Tab.ets共 87 行逐段拆解附 4 张实机截图。一、整体结构两区Header 消息流布局互动页是品牌头部 消息列表的两区布局build() { Column() { this.Header() Scroll() { Column({ space: 0 }) { this.List() } .width(100%).padding({ bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }2 块结构Header— 双行结构标题行 三分段行白底固定List— 4 条互动消息space: 0列表内由 Divider 分隔而非间距本页是消息通知类页面——与首页帖子流的卡片悬浮风格不同互动页采用整行白底 Divider 分隔的列表风格视觉上更像系统通知微信消息列表语义上区分浏览内容与查看通知两种模式。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header标题 三分段Header() { Column() { Row() { Text(互动消息).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 52).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .alignItems(VerticalAlign.Bottom) Row() { ForEach(this.tabs, (t: string, idx: number) { Text(t).fontSize(14) .fontColor(this.tab idx ? C.primary : C.textSub) .fontWeight(this.tab idx ? FontWeight.Bold : FontWeight.Normal) .layoutWeight(1).textAlign(TextAlign.Center).padding({ bottom: 12 }) .onClick(() { this.tab idx; }) }, (t: string) t) }.width(100%) }.width(100%).backgroundColor(C.card) }技术拆解标题行互动消息20 号加粗、safeTop 52高度、底部对齐——与 App 40 活动页同款。三分段[收到的赞, 评论, 回复]三个分类——对应互动动作的三种类型点赞、评论、回复。每个 TextlayoutWeight(1)平分、居中、padding({ bottom: 12 })与内容区留距。选中态State tab: number驱动选中红色加粗、未选灰色常规——与首页最新/最热的指示条不同本页用纯文字变色更轻两种分段风格在 App 内并存各有适用场景。received语义“收到的赞而非点赞”——本页展示的是别人对我的互动是通知视角而非操作视角措辞精确。三、List互动消息流List() { Column() { ForEach(this.items, (it: Interaction, idx: number) { Row({ space: 12 }) { Row() { Text(it.emoji).fontSize(20) } .width(42).height(42).backgroundColor(C.primarySoft).borderRadius(21).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Row() { Text(匿名同学 ).fontSize(13).fontWeight(FontWeight.Medium).fontColor(C.text) Text(it.type).fontSize(13).fontColor(C.textSub).layoutWeight(1) Text(it.time).fontSize(11).fontColor(C.textDim) }.width(100%) Text(it.content).fontSize(12).fontColor(C.textDim).maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }).width(100%) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding({ left: D.pad, right: D.pad, top: 14, bottom: 14 }).backgroundColor(C.card) .onClick(() { promptAction.showToast({ message: it.type }); }) if (idx this.items.length - 1) { Divider().color(C.stroke).strokeWidth(0.5).margin({ left: D.pad 54 }) } }, (it: Interaction) it.id.toString()) }.width(100%) }互动消息数据22-27 行由private items: Interaction[]静态数组提供emoji动作类型内容摘要时间❤️赞了你的表白图书馆三楼靠窗的女生…5分钟前评论了你好浪漫呀祝你成功15分钟前❤️赞了你的评论同感那个学长确实优秀1小时前↩️回复了你谢谢你的祝福 2小时前消息行细节图标42×42 浅红圆底 20 号 emoji——❤️赞、评论、↩️回复emoji 即动作类型图标一眼可辨。头行三信息匿名同学 13 号 Medium it.type13 号灰色layoutWeight(1)撑开it.time11 号浅灰——谁 做了什么 何时一行排布信息密度高。摘要行12 号浅灰、maxLines(1)textOverflow(Ellipsis)单行省略——消息内容过长时截断保持列表整洁对比首页帖子的全文展示通知场景只需摘要。缩进 Divider.margin({ left: D.pad 54 })——分隔线从图标右缘开始缩进 54 像素左边距对齐图标右侧而非整行开头这是微信式消息列表的标志性细节分隔线不贯穿图标列避免割裂感。整行可点点击 Toast 动作类型“赞了你的表白”。keyit.id.toString()稳定唯一。四、跨页数据自洽互动页是首页动作的通知中心互动页与首页的数据严格对应第一条赞了你的表白 / 图书馆三楼靠窗的女生…↔ 首页第一帖正文图书馆三楼靠窗的女生你看书认真的样子真好看…——内容摘要一致说明赞是对首页帖子的真实点赞动作。第二条评论了你 / 好浪漫呀祝你成功↔ 首页第一帖的评论区Demo 未展示评论区但评论内容与表白主题呼应。第三条赞了你的评论点赞的层级从帖子延伸到评论互动模型更立体。第四条回复了你 / 谢谢你的祝福 ↔ 第二条评论了你的后续——评论 → 回复构成对话链。时间梯度5分钟/15分钟/1小时/2小时与首页帖子时间同梯度模拟真实时间流。我的页 互动消息菜单↔ 本页 Header互动消息——菜单即本页入口命名一致。五、实机截图与交互演示本节结合 4 张实机截图逐张还原互动页的视觉效果与交互过程。1. 互动页首屏三分段 消息流第一张截图是互动页默认首屏顶部互动消息标题下方收到的赞 / 评论 / 回复三分段——收到的赞为红色加粗选中态下方是 4 条互动消息——❤️ 赞了你的表白5分钟前、 评论了你15分钟前、❤️ 赞了你的评论1小时前、↩️ 回复了你2小时前每条含 42×42 浅红圆底 emoji 图标、三行头信息与单行摘要Divider 缩进分隔清晰可见。2. 点击评论分段切换第二张截图是点击评论分段后的状态红色加粗高亮从收到的赞切换到评论State tab由 0 变 1。Demo 三分段共用同一消息列表未按类型过滤但分段切换交互完整为按动作类型过滤消息预留了结构——真实产品tab 0过滤 type‘赞’、tab 1过滤 type‘评论’。3. 点击消息弹出动作类型 Toast第三张截图是点击第一条消息❤️ 赞了你的表白后的反馈弹出赞了你的表白Toast。整行可点、闭包捕获it.type——点击哪条消息就弹出哪个动作类型列表点击参数传递正确。4. 互动页完整列表四消息全览第四张截图是互动页的完整列表视图四条消息全部可见缩进 Divider从图标右侧缩进在消息间清晰分隔最后一条↩️ 回复了你之后无 Divider。整个列表整行白底 细线分隔的通知风格一览无余Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。六、扩展思考消息通知系统的完整设计互动页是通知中心的最小原型真实产品的通知系统复杂得多通知类型扩展除赞/评论/回复外还有关注了你“提到了你”新粉丝等类型——Interaction接口的type字段可扩展UI 按 type 映射 emoji 图标当前 4 类已示范映射表模式。未读标记每条消息应有已读/未读状态——未读消息加红点角标或底色高亮系列 App 38 交流页已示范红点角标已读后置灰。State read: boolean字段驱动。点击跳转点击消息应跳转到对应的帖子/评论——如点赞了你的表白跳到首页第一帖定位——需要消息携带postId引用App 38 交流页的数据引用模式可复用。通知聚合同帖子的多条赞可聚合为N 个人赞了你的表白点开看明细避免通知刷屏——消息列表的聚合/展开是通知产品的进阶能力。推送接入真实产品通过鸿蒙推送ohos.push把互动事件实时推到通知栏App 打开后同步到本页——本页是推送消息的 App 内落点。七、扩展思考消息列表的交互与信息设计缩进 Divider 的对齐价值margin({ left: D.pad 54 })让分隔线对齐图标右侧42 宽图标 12 间距 54——视觉上图标列完整、内容列分隔这是微信/QQ 消息列表的通用细节用户无意识中感受到的精致往往来自这类对齐。摘要行的取舍maxLines(1) 省略号让长内容一行收起——通知场景用户只看是什么事详情点击进入。与首页帖子全文展示形成列表摘要 vs 内容全文的信息分层。时间倒序5分钟 → 2小时的时间梯度暗示列表按时间倒序最新在前——通知列表的标准排序。空态设计若互动消息为空新用户无互动应显示还没有人给你点赞空态图 引导去首页逛逛——当前 4 条静态数据演示不了空态产品化必备。左右滑动操作消息行支持左滑删除/标记已读SwipeAction组件是移动端通知的常见交互——扩展方向明确。八、开发者视角互动页的调试与验证技巧缩进 Divider 的像素对齐D.pad 54中 54 42图标宽 12Row space——若改图标尺寸缩进值必须同步更新否则分隔线错位。调试时用截图 标尺核对。maxLines 生效条件textOverflow({ overflow: TextOverflow.Ellipsis })必须配maxLines(1)与width(100%)三件套——缺一省略号不显示与 App 40 首页同款坑。分段过滤测试若实现按类型过滤需分别验证三个分段下列表长度与内容——items.filter(it it.type 赞了...)的匹配逻辑要注意 type 文案精确匹配。消息点击的闭包onClick闭包捕获it——ForEach 的 key 必须稳定id否则重排后点击会捕获错位的 item经典闭包陷阱。长列表性能消息可能成百上千条ForEach应升级LazyForEach 固定行高height常量保证滚动流畅——当前 4 条静态数据无压力。九、系列横向对比列表页 Divider 的四种用法互动页的缩进 Divider 是系列中处理最精细的横向对比可看清 Divider 的完整用法谱系Divider 用法代表页实现视觉效果缩进分隔App 41 互动页margin 左缩进 54图标列完整、内容列分隔全宽细线App 41/40 我的页菜单无 margin标准菜单分隔条件分隔系列所有菜单idx 判断最后一行最后一项无分隔线无 DividerApp 41 首页帖子space 间距卡片悬浮感缩进 vs 全宽的语义互动页是消息列表微信式用缩进 Divider 营造头像列连续、内容列分隔的层次我的页菜单是功能清单设置式用全宽 Divider 明确每行是一个独立入口。Divider 的缩进程度决定列表的社交感 vs 工具感——缩进越多越像聊天 App全宽越像设置页。本页 54 像素的缩进42 图标 12 间距正是微信消息列表的标准对齐细节处见专业。为什么本页不用卡片间距首页帖子用卡片 space 间距内容需要悬浮突出互动页用整行 Divider通知需要紧凑高效——内容型列表用卡片、通知型列表用分隔线这是两类列表的视觉分水岭。App 41 同一 App 内两种风格并存且各自合理说明列表形态选择始终服务于内容属性而非风格统一。十、系列横向对比消息通知页的三种形态互动页是通知中心的轻量实现系列其他 App 的通知/消息能力可对照通知形态代表 App能力复杂度互动消息流App 41 互动页赞/评论/回复通知轻聊天会话列表App 38 交流页私聊会话 未读角标中提醒事项App 27 提醒页日历 提醒列表中App 41 互动页是系列首个被动通知页面别人对你做了什么而 App 38 交流页是主动聊天——两者构成社交产品的两大通知维度互动通知赞/评论与消息会话私聊。真实产品中二者会合并进同一个消息中心顶部 Tab 切换互动/私信本页的三分段结构收到的赞/评论/回复正是这种合并的雏形。通知的点击闭环App 41 互动消息点击弹 Toast占位App 38 交流消息点击也应进入聊天页——产品化后两个页面的消息都应携带目标引用postId/会话 id跳转把通知转化为行为。通知页的最高境界是每一条都能点进去看到上下文本页与 App 38 的点击占位均为这一闭环留好了接口。十一、开发者视角互动页的常见问题与避坑清单缩进 Divider 的维护成本margin({ left: D.pad 54 })中 54 与图标尺寸42强耦合——若设计师调整图标为 48缩进必须同步改为 60否则分隔线错位。建议把 54 定义为常量如const DIVIDER_INDENT D.pad 54集中管理。消息去重的必要性真实通知可能有重复同一人多次点赞——列表应去重聚合“匿名同学 和另外 3 人赞了你”否则用户被同一类通知刷屏。聚合逻辑通常在服务端完成客户端只渲染聚合结果。时间格式的刷新5分钟前/1小时前这类相对时间是活的——页面停留 10 分钟后5分钟前应变为15分钟前需要定时刷新或进入页面时重新计算。Demo 静态时间可接受产品化需setInterval或onPageShow重算。点击跳转的上下文点击赞了你的表白应跳转到被赞的帖子——消息数据需携带postId跳转后帖子高亮定位。当前 Toast 占位丢失了上下文信息产品化时要补上。未读红点的数据源若加未读标记App 38 已示范红点角标未读数应来自服务端统一统计互动页 Tab 图标与菜单项我的页 互动消息同步显示——红点数据全 App 一致避免这里读了那里还亮的矛盾。十二、FAQ 与一句话总结Q1互动页和首页帖子是什么关系互动页是首页互动动作的通知回执——你在首页点赞的帖子作者会在互动页收到有人赞了你的表白反过来别人对你的互动也汇总在这里。两页是动作发生地与通知接收地的关系。Q2为什么用收到的赞而不是点赞“收到的赞明确是别人给我的”被动“点赞是我给的”主动——本页展示的是别人对我的互动措辞必须区分方向避免语义混淆。Q3缩进 Divider 有什么好处分隔线从图标右缘开始图标列保持完整连续——视觉上降低割裂感让列表更接近真实消息 App 的质感是细节处的专业度。Q4点击消息为什么弹的是动作类型Demo 未实现跳转用动作类型 Toast 占位最贴语义。产品化后点击应携带postId跳转到对应帖子Toast 换成路由跳转即可。Q5三分段为什么不真的过滤消息Demo 为演示简洁共用列表。真实产品按 type 过滤收到的赞只显示赞类State tab已就绪过滤逻辑一行动态筛选即可——结构上零改动。一句话总结互动页用三分段 消息流完成了通知中心的范式——emoji 图标即动作类型、三行头信息即谁/什么/何时、缩进 Divider 即列表精致感、单行摘要即信息分层。配合首页点赞的真实联动赞了你的表白引用首页第一帖互动页让整个 App 的动作 → 通知闭环真实可信是系列中完成度最高的通知类页面。最后从验收视角确认四张实机截图覆盖了首屏分段消息流、分段切换评论高亮、消息点击动作 Toast、完整列表四消息全览四个状态缩进 Divider 的对齐、单行摘要的省略、整行点击的反馈均验证正常配合首页点赞的真实联动数据互动页的通知中心职能完整落地验收通过。未来若接入推送与未读红点互动页即可无缝升级为生产级的消息中心当前三分段结构已为此预留全部扩展点。再看互动页在整个 App 中的位置首页负责表达发布页负责生产互动页负责回响——用户的每一份心意在这里得到反馈这种表达必有回响的设计正是社交产品留住用户的情感纽带也是本页虽小却至关重要的原因。而缩进 Divider、单行摘要、emoji 图标这些细节则让回响的呈现足够精致——用户在意的是心意被认真对待页面的每一处考究都在传递这份认真。补充说明互动页的交互设计还有一处容易被忽略的细节——每条消息整行可点且 Toast 反馈动作类型这个点击即反馈的模式其实已经隐含了消息可操作的心理暗示用户会自然期待点击后看到更多内容这正是产品化后跳转帖子的行为基础。另外消息行的space: 0与 Divider 搭配让列表在紧凑与分隔之间取得平衡——不靠间距靠细线是通知列表区别于内容卡片的典型手法。互动页虽然只有 87 行代码却示范了通知类列表页的全部要点消息模型Interaction、图标映射emoji 即类型、三行头信息谁/什么/何时、单行摘要省略号、缩进分隔Divider、分段筛选State tab——这套消息列表六件套可直接复用到任何通知中心、站内信、私信列表场景值得开发者反复研读。