鸿蒙原生应用 HarmonyOS 6.0实战不引图表库 —— 通讯录班级页男女三列统计与公告列表App 46「班级通讯录」班级页Func2Tab主题色#0984E3蓝色blue4 个 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 块结构Header— 单行品牌头“班级信息”StatCard— 班级统计卡45 人/24 男/21 女班级规模的数据背书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 女生——三列等分。技术拆解标题行“计科2022级17 号加粗——班级名是统计的主语”与首页班级卡同名。三列统计45 总人数20 号蓝色加粗/ 24 男生 / 21 女生——主数字用C.primary蓝色核心数据突出标签 11 号浅灰layoutWeight(1)三等分。数据自洽45 24 21男女分项之和 总数——统计数学自洽用户心算可验证同时 45 与首页45 名成员、我的页45 班级成员一致。卡片样式白底圆角 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 行emoji标题日期春季运动会报名开始置顶08-15班会调整通知08-14班费收缴通知08-13卡片细节emoji 即公告类型置顶/重要、通知、行政——emoji 标注公告性质一眼可辨。标题 日期14 号 Medium 标题 11 号浅灰日期08-15 等layoutWeight(1)撑开右侧 “” 箭头暗示可点。置顶公告的语义第一条 春季运动会报名开始—— 图钉 emoji 表达置顶钉在列表顶部置顶公告是最重要的班级信息运动会是近期大事件。整行可点点击弹公告标题 Toast——产品化后进入公告详情页完整内容 发布时间 相关文件。keyn.id.toString()稳定唯一。五、跨页数据自洽班级页是班级维度的信息中枢班级页与首页、我的页的联动“计科2022级”↔ 首页班级卡计科2022级↔ 我的页副标题计科2022级——班级名三页统一。“45 总人数”↔ 首页45 名成员 ↔ 我的页45 班级成员——45 三处一致男女分项 2421 自洽。公告春季运动会↔ 首页快捷入口 公告——首页入口即本页公告列表。公告的时效08-15/08-14/08-13 三天的公告倒序最新在前——公告是班级事务的时间流。六、实机截图与交互演示本节结合 4 张实机截图逐张还原班级页的视觉效果与交互过程。1. 班级页首屏统计卡 公告列表第一张截图是班级页默认首屏顶部班级信息标题下方统计卡——计科2022级17 号加粗 三列统计45 总人数 蓝色加粗 / 24 男生 / 21 女生班级公告标题下是第一条公告—— 春季运动会报名开始08-15第二条 班会调整通知部分可见。统计卡与公告列表的结构清晰452421 的数据自洽直观。2. 点击置顶公告弹出标题 Toast第二张截图是点击第一条置顶公告 春季运动会报名开始后的反馈弹出春季运动会报名开始Toast——每条公告整行可点、闭包捕获n.title点击哪条弹出哪条标题。置顶公告与普通公告的 emoji 区别在点击反馈中得到验证。3. 点击班会通知弹出标题 Toast第三张截图是点击第二条公告 班会调整通知后的反馈弹出班会调整通知Toast——与置顶公告同款整行可点交互验证公告列表的点击参数传递对每条公告都正确。4. 班级页完整列表三公告全览第四张截图是班级页的完整列表三条公告全部可见 春季运动会报名开始 08-15 / 班会调整通知 08-14 / 班费收缴通知 08-13日期倒序排列最新在前。Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。七、扩展思考班级公告的产品设计公告列表是班级信息的中枢真实产品的公告系统更完整公告的编辑权限仅班委/老师可发公告发公告权限分级——学生只能看不能发防止刷屏公告的权威性通过权限保证。公告的分类置顶/重要/普通三级 置顶、⚠️ 重要、 普通——置顶公告固定在列表顶部不受时间排序影响重要公告加红标普通按时间倒序。公告的已读每条公告显示已读 N/45——班委可看到公告触达率多少人看了未读提醒红点驱动学生查看。公告的详情点击进入详情页——完整正文 发布时间 发布人 附件报名表/课表 评论区——公告是班级事务的完整载体。公告的推送新公告推送通知“班级公告春季运动会报名开始”——公告的时效性需要推送触达配合设置菜单的公告提醒开关。八、扩展思考班级统计的数据可视化45/24/21 的统计卡可以升级为更丰富的数据展示性别比例的可视化24 男/21 女可配环形图Progress Ring 同款或进度条男女比例 53%/47%——数字 图形的双表达App 39 首页环形进度同款手法。更多统计维度宿舍分布男寝 6 间/女寝 5 间、籍贯分布各省人数、姓氏统计王姓 5 人——统计卡从性别扩展到多维度班级画像更立体。统计与通讯录的联动点击24 男生过滤通讯录只看男生——统计数字变成筛选入口统计与列表互动。毕业时间线班级成立2022.09→ 毕业2026.06的时间轴——班级统计卡加入学/毕业时间班级页成为班级编年史的起点。成员参与度公告已读率、活动参与率按班级聚合——班级活跃度数据让45 人从静态数字变成班级共同体的动态画像。九、开发者视角班级页的调试与验证技巧统计自洽的验证45 24 21——若改统计数字如男生 23需同步总数45 → 44防止数据矛盾自动化脚本可校验 sum(分项) 总数。公告排序3 条按日期倒序08-15 → 08-13——若加置顶公告置顶应固定顶部与日期排序分离验证置顶优先、其余倒序的排序逻辑。emoji 的类型语义// 三类 emoji 的区分——真机确认三种 emoji 渲染清晰、语义可辨 置顶、 通知、 行政。公告长标题标题 14 号 Medium——长标题“春季运动会报名开始啦”单行显示超长需省略maxLines(1)验证。数据自洽45 人/计科2022级与首页、我的页三处一致——修改需同步系列验收标准。十、FAQ 与一句话总结Q1班级页和通讯录页有什么区别通讯录页是成员全集谁在班里、怎么联系班级页是班级组织多少人、有什么公告——一个管人、一个管事务通讯录回答找谁、班级页回答班里发生了什么。Q2置顶公告是怎么实现的Demo 用静态数组置顶公告排第一 emoji 标注——产品化后isPinned字段置顶排序优先 图标由isPinned驱动渲染。Q3公告谁可以发Demo 仅展示。产品化后权限分级班委/老师可发——公告的权威性通过权限保证学生端只读。Q445 总人数会和通讯录的成员数联动吗会——通讯录成员增删转班时统计卡应同步刷新45 → 44产品化后同一数据源成员表驱动统计与列表。Q5公告点击后能看到完整内容吗Demo 弹标题 Toast。产品化后进入公告详情页正文 时间 发布人 附件——公告卡是详情页的入口。一句话总结班级页以统计卡 公告列表完成了班级组织的信息展示。45 总人数/24 男/21 女的三列统计数学自洽 三页一致、 置顶公告与 / 公告列表emoji 即类型、日期倒序的时间流——82 行代码一个看清班级全貌的班级信息页也是统计 公告班级维度页面的标准参考。十一、系列横向对比公告/通知类列表的三种形态班级页的公告列表是通知类列表与系列其他通知/公告对比可看清设计差异列表代表 App信息单元置顶机制操作班级公告App 46 班级页emoji标题日期 置顶查看详情互动消息App 41 互动页动作摘要时间无查看上下文待办清单App 48 班委任务任务状态优先级处理公告列表的差异置顶机制班级公告有 置顶最重要的信息钉在顶部不受时间排序影响——App 41 互动消息无置顶通知是时间流、待办清单用优先级排序任务是处理序列——置顶是公告类内容的特权公告有权威性需要置顶传达最重要的先说。emoji 即类型 置顶/ 通知/ 行政——emoji 标注公告性质对比 App 41 用 emoji 标动作类型同一emoji 语义手法在通知类列表间通用。单向信息公告是班委 → 全班的单向信息无互动互动消息是双向互动的通知有回复——公告列表无互动按钮对比 App 41 有回复/赞信息流向决定列表交互。复用价值本页统计卡 公告列表的结构可复用到任何组织信息页社团动态、部门通知、家庭公告置顶公告 时间倒序 emoji 类型三件套是公告类页面的标准范式。十二、扩展思考班级统计与班级画像统计卡45/24/21可以扩展为完整的班级画像让班级页成为班级的数据中枢多维统计性别45/24/21之上加籍贯分布各省人数、“宿舍分布”1 栋/2 栋、“姓氏统计”王姓 5 人——统计卡从 3 列扩展到多维度网格班级画像更立体。统计可视化性别比例配环形图Progress Ring、籍贯配条形图——数字 图形的双表达系列惯例统计卡升级为班级数据看板。统计与列表联动点击24 男生过滤通讯录只看男生、点击王姓 5 人跳转姓氏分组——统计数字变成筛选入口统计与通讯录互动。班级成长史入学时间2022.09/毕业时间2026.06 班级大事记军训/换届/获奖——班级页从静态统计升级为班级编年史与纪念册App 44的集体记忆呼应。活跃度指标公告已读率“已读 32/45”、活动参与率——班级活跃度让45 人从静态数字变成班级共同体的动态画像支撑班委运营。十三、开发者视角班级页的调试与验证技巧统计自洽的验证45 24 21——若改统计数字如男生 23需同步总数45 → 44防止数据矛盾自动化脚本可校验 sum(分项) 总数。公告排序3 条按日期倒序08-15 → 08-13——若加置顶公告置顶应固定顶部与日期排序分离验证置顶优先、其余倒序的排序逻辑。emoji 的类型语义// 三类 emoji 的区分——真机确认三种 emoji 渲染清晰、语义可辨 置顶、 通知、 行政。公告长标题标题 14 号 Medium——长标题“春季运动会报名开始啦”单行显示超长需省略maxLines(1)验证。数据自洽45 人/计科2022级与首页、我的页三处一致——修改需同步系列验收标准。日期格式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 行代码内建立起数据可信、信息有序的班级中枢形象也印证了本系列一贯的验收标准——数字处处有出处、列表时时见秩序。若开发者能从中带走一点那就是统计要自洽、公告要置顶、信息要排序这三条班级信息页的设计纪律。