鸿蒙原生应用 HarmonyOS 6.0实战：不引图表库 —— 通讯录班级页男女三列统计与公告列表

App 46「班级通讯录」班级页（Func2Tab），主题色#0984E3蓝色（blue），4 个 Tab 分别为首页（🏠）、通讯录（👥）、班级（📋）、我的（👤）。班级页采用"Header + 统计卡 + 公告列表"三区布局——白色单行 Header（"班级信息"20 号加粗）+班级统计卡（45 总人数 / 24 男生 / 21 女生 三列等分 + "计科2022级"标题）+SectionTitle（班级公告）+ 3 条公告（📌 置顶公告"春季运动会报名开始" / 📢 班会调整通知 / 📋 班费收缴通知，每条含 emoji 图标 + 标题 + 日期 + 发布时间）。本篇基于46-class-contacts/entry/src/main/ets/pages/Func2Tab.ets（共 82 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 统计卡 + 公告列表"布局

班级页是"品牌头部 + 班级统计 + 公告清单"的三区布局——2 个 @Builder 块：

build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.StatCard() this.SectionTitle('班级公告') this.NoticeList() } .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) }

3 块结构：

1. Header— 单行品牌头（“班级信息”）
2. StatCard— 班级统计卡（45 人/24 男/21 女），班级规模的数据背书
3. NoticeList— “班级公告” + 3 条公告（含置顶公告）

班级页定位是"班级概况 + 公告中心"——统计卡回答"我们班多少人"、公告列表回答"班里最近有什么事"，是通讯录产品中"班级组织"维度的展示页。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、Header：单行标题

Header() { Row() { Text('班级信息').fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width('100%').height(this.safeTop + 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }

单行 20 号加粗、safeTop + 56高度、白底、底部对齐——系列二级页统一范式。"班级信息"涵盖统计与公告，命名比"班级公告"更广。

三、StatCard：班级统计卡

StatCard() { Column({ space: 12 }) { Text('计科2022级').fontSize(17).fontWeight(FontWeight.Bold).fontColor(C.text).width('100%') Row() { ForEach(this.stats, (s: Stat) => { Column({ space: 4 }) { Text(s.value).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.primary) Text(s.label).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) }, (s: Stat) => s.label) }.width('100%') } .width('100%').padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }

统计数据（19-23 行）：45 总人数 / 24 男生 / 21 女生——三列等分。

技术拆解：

1. 标题行：“计科2022级"17 号加粗——班级名是统计的"主语”，与首页班级卡同名。
2. 三列统计：45 总人数（20 号蓝色加粗）/ 24 男生 / 21 女生——主数字用C.primary蓝色（核心数据突出），标签 11 号浅灰；layoutWeight(1)三等分。
3. 数据自洽：45 = 24 + 21（男女分项之和 = 总数）——统计数学自洽，用户心算可验证；同时 45 与首页"45 名成员"、我的页"45 班级成员"一致。
4. 卡片样式：白底圆角 20 + 描边 + 16 内边距——系列标准卡片。

四、NoticeList：公告列表

NoticeList() { Column({ space: 12 }) { ForEach(this.notices, (n: Notice) => { Row({ space: 12 }) { Text(n.emoji).fontSize(24) Column({ space: 4 }) { Text(n.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(n.date).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text('>').fontSize(14).fontColor(C.textDim) } .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() => { promptAction.showToast({ message: n.title }); }) }, (n: Notice) => n.id.toString()) }.width('100%') }

3 条公告（19-25 行）：

卡片细节：

1. emoji 即公告类型：📌（置顶/重要）、📢（通知）、📋（行政）——emoji 标注公告性质，一眼可辨。
2. 标题 + 日期：14 号 Medium 标题 + 11 号浅灰日期（08-15 等，layoutWeight(1)撑开），右侧 “>” 箭头暗示可点。
3. 置顶公告的语义：第一条"📌 春季运动会报名开始"——📌 图钉 emoji 表达"置顶"（钉在列表顶部），置顶公告是最重要的班级信息（运动会是近期大事件）。
4. 整行可点：点击弹公告标题 Toast——产品化后进入公告详情页（完整内容 + 发布时间 + 相关文件）。
5. key：n.id.toString()稳定唯一。

五、跨页数据自洽：班级页是班级维度的"信息中枢"

班级页与首页、我的页的联动：

• “计科2022级”↔ 首页班级卡（计科2022级）↔ 我的页副标题（计科2022级）——班级名三页统一。
• “45 总人数”↔ 首页"45 名成员" ↔ 我的页"45 班级成员"——45 三处一致，男女分项 24+21 自洽。
• 公告"春季运动会"↔ 首页快捷入口"📢 公告"——首页入口即本页公告列表。
• 公告的时效：08-15/08-14/08-13 三天的公告倒序（最新在前）——公告是班级事务的时间流。

六、实机截图与交互演示

本节结合 4 张实机截图，逐张还原班级页的视觉效果与交互过程。

1. 班级页首屏：统计卡 + 公告列表

第一张截图是班级页默认首屏：顶部"班级信息"标题；下方统计卡——"计科2022级"17 号加粗 + 三列统计（45 总人数 蓝色加粗 / 24 男生 / 21 女生）；"班级公告"标题下是第一条公告——📌 春季运动会报名开始（08-15），第二条"📢 班会调整通知"部分可见。统计卡与公告列表的结构清晰，45=24+21 的数据自洽直观。

2. 点击置顶公告：弹出标题 Toast

第二张截图是点击第一条置顶公告"📌 春季运动会报名开始"后的反馈：弹出"春季运动会报名开始"Toast——每条公告整行可点、闭包捕获n.title，点击哪条弹出哪条标题。置顶公告（📌）与普通公告的 emoji 区别在点击反馈中得到验证。

3. 点击班会通知：弹出标题 Toast

第三张截图是点击第二条公告"📢 班会调整通知"后的反馈：弹出"班会调整通知"Toast——与置顶公告同款整行可点交互，验证公告列表的点击参数传递对每条公告都正确。

4. 班级页完整列表：三公告全览

第四张截图是班级页的完整列表：三条公告全部可见（📌 春季运动会报名开始 08-15 / 📢 班会调整通知 08-14 / 📋 班费收缴通知 08-13），日期倒序排列（最新在前）。Scroll 滚动流畅，底部安全区内边距保证 Tab 栏可点。

七、扩展思考：班级公告的产品设计

公告列表是班级信息的中枢，真实产品的公告系统更完整：

1. 公告的编辑权限：仅班委/老师可发公告（发公告权限分级）——学生只能看不能发（防止刷屏），公告的"权威性"通过权限保证。
2. 公告的分类：置顶/重要/普通三级（📌 置顶、⚠️ 重要、📢 普通）——置顶公告固定在列表顶部（不受时间排序影响），重要公告加红标，普通按时间倒序。
3. 公告的已读：每条公告显示"已读 N/45"——班委可看到公告触达率（多少人看了），未读提醒（红点）驱动学生查看。
4. 公告的详情：点击进入详情页——完整正文 + 发布时间 + 发布人 + 附件（报名表/课表）+ 评论区——公告是班级事务的完整载体。
5. 公告的推送：新公告推送通知（“班级公告：春季运动会报名开始”）——公告的时效性需要推送触达，配合"设置"菜单的公告提醒开关。

八、扩展思考：班级统计的数据可视化

45/24/21 的统计卡可以升级为更丰富的数据展示：

1. 性别比例的可视化：24 男/21 女可配环形图（Progress Ring 同款）或进度条（男女比例 53%/47%）——数字 + 图形的双表达（App 39 首页环形进度同款手法）。
2. 更多统计维度：宿舍分布（男寝 6 间/女寝 5 间）、籍贯分布（各省人数）、姓氏统计（王姓 5 人）——统计卡从性别扩展到多维度，班级画像更立体。
3. 统计与通讯录的联动：点击"24 男生"过滤通讯录（只看男生）——统计数字变成筛选入口，统计与列表互动。
4. 毕业时间线：班级成立（2022.09）→ 毕业（2026.06）的时间轴——班级统计卡加"入学/毕业"时间，班级页成为"班级编年史"的起点。
5. 成员参与度：公告已读率、活动参与率按班级聚合——班级活跃度数据让"45 人"从静态数字变成"班级共同体"的动态画像。

九、开发者视角：班级页的调试与验证技巧

1. 统计自洽的验证：45 = 24 + 21——若改统计数字（如男生 23），需同步总数（45 → 44），防止数据矛盾（自动化脚本可校验 sum(分项) = 总数）。
2. 公告排序：3 条按日期倒序（08-15 → 08-13）——若加置顶公告，置顶应固定顶部（与日期排序分离），验证"置顶优先、其余倒序"的排序逻辑。
3. emoji 的类型语义：📌/📢/📋 三类 emoji 的区分——真机确认三种 emoji 渲染清晰、语义可辨（📌 置顶、📢 通知、📋 行政）。
4. 公告长标题：标题 14 号 Medium——长标题（“春季运动会报名开始啦”）单行显示，超长需省略（maxLines(1)），验证。
5. 数据自洽：45 人/计科2022级与首页、我的页三处一致——修改需同步（系列验收标准）。

十、FAQ 与一句话总结

Q1：班级页和通讯录页有什么区别？
通讯录页是"成员全集"（谁在班里、怎么联系），班级页是"班级组织"（多少人、有什么公告）——一个管人、一个管事务，通讯录回答"找谁"、班级页回答"班里发生了什么"。

Q2：置顶公告是怎么实现的？
Demo 用静态数组（置顶公告排第一）+ 📌 emoji 标注——产品化后isPinned字段置顶（排序优先），📌 图标由isPinned驱动渲染。

Q3：公告谁可以发？
Demo 仅展示。产品化后权限分级（班委/老师可发）——公告的权威性通过权限保证，学生端只读。

Q4："45 总人数"会和通讯录的成员数联动吗？
会——通讯录成员增删（转班）时统计卡应同步刷新（45 → 44），产品化后同一数据源（成员表）驱动统计与列表。

Q5：公告点击后能看到完整内容吗？
Demo 弹标题 Toast。产品化后进入公告详情页（正文 + 时间 + 发布人 + 附件）——公告卡是详情页的入口。

一句话总结：班级页以"统计卡 + 公告列表"完成了班级组织的信息展示。"45 总人数/24 男/21 女"的三列统计（数学自洽 + 三页一致）、📌 置顶公告与 📢/📋 公告列表（emoji 即类型）、日期倒序的时间流——82 行代码，一个"看清班级全貌"的班级信息页，也是"统计 + 公告"班级维度页面的标准参考。

十一、系列横向对比：公告/通知类列表的三种形态

班级页的公告列表是"通知类列表"，与系列其他通知/公告对比可看清设计差异：

公告列表的差异：

1. 置顶机制：班级公告有"📌 置顶"（最重要的信息钉在顶部，不受时间排序影响）——App 41 互动消息无置顶（通知是时间流）、待办清单用"优先级"排序（任务是处理序列）——置顶是"公告"类内容的特权（公告有"权威性"，需要置顶传达"最重要的先说"）。
2. emoji 即类型：📌 置顶/📢 通知/📋 行政——emoji 标注公告性质（对比 App 41 用 emoji 标动作类型），同一"emoji 语义"手法在通知类列表间通用。
3. 单向信息：公告是"班委 → 全班"的单向信息（无互动），互动消息是"双向互动"的通知（有回复）——公告列表无互动按钮（对比 App 41 有回复/赞），信息流向决定列表交互。

复用价值：本页"统计卡 + 公告列表"的结构可复用到任何"组织信息"页（社团动态、部门通知、家庭公告），置顶公告 + 时间倒序 + emoji 类型三件套是公告类页面的标准范式。

十二、扩展思考：班级统计与班级画像

统计卡（45/24/21）可以扩展为完整的"班级画像"，让班级页成为班级的数据中枢：

1. 多维统计：性别（45/24/21）之上加"籍贯分布"（各省人数）、“宿舍分布”（1 栋/2 栋）、“姓氏统计”（王姓 5 人）——统计卡从 3 列扩展到多维度网格，班级画像更立体。
2. 统计可视化：性别比例配环形图（Progress Ring）、籍贯配条形图——数字 + 图形的双表达（系列惯例），统计卡升级为"班级数据看板"。
3. 统计与列表联动：点击"24 男生"过滤通讯录（只看男生）、点击"王姓 5 人"跳转姓氏分组——统计数字变成筛选入口，统计与通讯录互动。
4. 班级成长史：入学时间（2022.09）/毕业时间（2026.06）+ 班级大事记（军训/换届/获奖）——班级页从"静态统计"升级为"班级编年史"，与纪念册（App 44）的集体记忆呼应。
5. 活跃度指标：公告已读率（“已读 32/45”）、活动参与率——班级活跃度让"45 人"从静态数字变成"班级共同体"的动态画像，支撑班委运营。

十三、开发者视角：班级页的调试与验证技巧

1. 统计自洽的验证：45 = 24 + 21——若改统计数字（如男生 23），需同步总数（45 → 44），防止数据矛盾（自动化脚本可校验 sum(分项) = 总数）。
2. 公告排序：3 条按日期倒序（08-15 → 08-13）——若加置顶公告，置顶应固定顶部（与日期排序分离），验证"置顶优先、其余倒序"的排序逻辑。
3. emoji 的类型语义：📌/📢/📋 三类 emoji 的区分——真机确认三种 emoji 渲染清晰、语义可辨（📌 置顶、📢 通知、📋 行政）。
4. 公告长标题：标题 14 号 Medium——长标题（“春季运动会报名开始啦”）单行显示，超长需省略（maxLines(1)），验证。
5. 数据自洽：45 人/计科2022级与首页、我的页三处一致——修改需同步（系列验收标准）。
6. 日期格式：08-15 的"月-日"格式——跨年公告（2025-12-30）需带年份，格式化逻辑（今年省略年份/跨年补年份）产品化时设计。

十四、FAQ 与一句话总结

Q6：公告能置顶多条吗？
可以——多条置顶按发布时间倒序排列（都钉在顶部），非置顶按时间倒序在其后——isPinned字段 + 两级排序（置顶优先、同级别内按时间）是标准实现。

Q7：统计卡的数字会变化吗？
会——班级成员变动（转班）时 45 → 44（男女分项同步），产品化后同一成员表驱动统计与通讯录，数字动态刷新。

Q8：公告的已读状态在哪看？
Demo 未实现。产品化后公告卡加"已读 32/45"（触达率）与本人已读标记（已读灰字/未读蓝字）——班委看触达、成员看未读，公告列表的双视角。

Q9：公告支持图片/附件吗？
Demo 纯文本标题。产品化后公告详情页支持图片（报名表截图）、附件（文件下载）、链接——公告是班级事务的完整载体，详情页承载富内容。

Q10：班级页和纪念册（App 44）的班级维度有什么不同？
纪念册是"班级记忆"（照片/留言，情感向），班级页是"班级组织"（统计/公告，事务向）——一个记录"我们经历过什么"、一个管理"班级现在做什么"，两者互补，产品化可打通（公告关联纪念册活动）。这些 FAQ 与前面的拆解共同构成本页的完整解析。

补充一处细节观察：班级页统计卡的"45 总人数 / 24 男生 / 21 女生"是三列等分 + 蓝色主数字的标准组合，而它真正的巧妙之处在"数学自洽"——45 = 24 + 21，用户哪怕不信任数据，心算一遍也能验证"数字是对的"，这种"可验证的统计"是数据可信度的最高级形式（对比"虚高"的数字，自洽数字天然赢得信任）。公告列表的日期（08-15/08-14/08-13）同样是可验证的时间流——连续三天的公告倒序排列，用户一眼看出"最新的是运动会报名"，置顶公告（📌）钉在时间流之上，形成"置顶优先 + 时间倒序"的双层信息秩序。这些"自洽 + 有序"的设计让班级页在 82 行代码内建立起"数据可信、信息有序"的班级中枢形象，也印证了本系列一贯的验收标准——数字处处有出处、列表时时见秩序。若开发者能从中带走一点，那就是"统计要自洽、公告要置顶、信息要排序"这三条班级信息页的设计纪律。