鸿蒙原生应用实战ArkTS 通讯录页搜索栏与成员卡片设计App 46「班级通讯录」通讯录页Func1Tab主题色#0984E3蓝色blue4 个 Tab 分别为首页、通讯录、班级、我的。通讯录页采用Header 搜索栏 成员列表三区布局——白色单行 Header班级通讯录20 号加粗搜索栏圆角 TextInput 占位搜索姓名或学号 图标不可交互展示SectionTitle全部成员 5 位成员 张娜 / 陈晨 / 王杰 / 刘洋 / 李娜每条含 42×42 蓝底圆头像 姓名 学号 在线状态点 呼叫按钮。本篇基于46-class-contacts/entry/src/main/ets/pages/Func1Tab.ets共 82 行逐段拆解附 4 张实机截图。一、整体结构三区Header 搜索 成员列表布局通讯录页是品牌头部 搜索入口 成员清单的三区布局——2 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 12 }) { this.SearchBar() this.SectionTitle(全部成员) this.MemberList() } .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— 单行品牌头班级通讯录SearchBar— 搜索姓名/学号的入口成员多时的定位工具MemberList— 全部成员 5 位成员列表Demo 展示 5 位班级页统计为 45 人通讯录页是首页老师与班委的全集扩展——首页只列 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高度、白底、底部对齐——系列二级页统一范式。三、SearchBar搜索栏SearchBar() { Row({ space: 8 }) { Text().fontSize(16) TextInput({ placeholder: 搜索姓名或学号 }).fontSize(14) .backgroundColor(Color.Transparent).layoutWeight(1) } .width(100%).padding({ left: 12, right: 12, top: 10, bottom: 10 }) .backgroundColor(C.cardSoft).borderRadius(D.rMd) }技术拆解 图标 透明输入框Text()TextInput透明背景、layoutWeight(1)撑开组合成搜索栏—— 是搜索的通用视觉锚点透明输入框融入浅底容器。浅底圆角容器cardSoft浅蓝灰底 圆角 14 内边距 12/10——胶囊形搜索框是通讯录/列表类产品的标配微信/通讯录同款。占位文案搜索姓名或学号——两种检索维度姓名/学号都提示覆盖通讯录的检索需求。产品化实现Demo 输入框不可交互无 onChange 过滤——产品化后onChange过滤成员列表members.filter(m m.name.includes(keyword) || m.id.includes(keyword))搜索栏是列表的过滤引擎入口。四、MemberList成员列表MemberList() { Column({ space: 12 }) { ForEach(this.members, (m: Member) { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(20) } .width(42).height(42).backgroundColor(C.primarySoft).borderRadius(21).justifyContent(FlexAlign.Center) Column({ space: 3 }) { Row({ space: 6 }) { Text(m.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(m.id).fontSize(11).fontColor(C.textDim) }.alignItems(VerticalAlign.Center) Row({ space: 5 }) { Circle().width(7).height(7).fill(m.online ? C.ok : C.textDim) Text(m.online ? 在线 : 离线).fontSize(11).fontColor(m.online ? C.ok : C.textDim) } }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text().fontSize(16) .padding(8).backgroundColor(C.primarySoft).borderRadius(16) .onClick(() { promptAction.showToast({ message: 呼叫 m.name }); }) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: m.name }); }) }, (m: Member) m.id.toString()) }.width(100%) }5 位成员19-27 行成员emoji学号在线张娜2022010101在线陈晨2022010102在线王杰2022010103离线刘洋2022010104在线李娜2022010105离线卡片细节头像42×42 蓝底圆 20 号 /——按性别区分的学生 emoji男生 / 女生 。姓名 学号14 号 Medium 姓名 11 号浅灰学号2022010101 八位学号同行——学号是班级成员的唯一标识与姓名并列展示支撑搜索姓名或学号的检索维度。在线状态点与首页同款Circle()绿/灰点 在线/离线文字——通讯录页与首页共享同一状态组件模式用户已经熟悉绿点 在线。 呼叫16 号 8 padding 蓝底圆角 16——与首页同款 独立按钮 整卡双事件层级。keym.id.toString()稳定唯一此处 id 是学号天然唯一且稳定。5 位 vs 45 人的口径Demo 展示 5 位成员、班级页统计总人数 45——5 是当前展示的成员样例、45 是全班成员总数口径分层与 App 44 相册8 张展示/256 张总数同款口径设计。五、跨页数据自洽通讯录页是成员的全集通讯录页与首页、班级页的联动张娜/陈晨/王杰/刘洋/李娜↔ 首页张老师/王班长/陈生委——首页是核心角色老师班委、通讯录是全部成员含普通同学两者构成高频 全集的成员体系。学号体系↔ 我的页个人资料学号字段——每位成员有唯一学号2022010101 等我的页展示本人学号通讯录展示他人学号。在线状态↔ 首页在线状态点——同一状态组件两页复用状态语义一致。45 人↔ 首页45 名成员、班级页总人数 45——通讯录是 45 人的全集Demo 展示 5 位为样例。六、实机截图与交互演示本节结合 4 张实机截图逐张还原通讯录页的视觉效果与交互过程。1. 通讯录页首屏搜索栏 成员列表第一张截图是通讯录页默认首屏顶部班级通讯录标题下方搜索栏—— 图标 圆角浅底输入框占位搜索姓名或学号全部成员标题下是第一位成员—— 张娜2022010101 / 绿色在线点 / 第二位 陈晨部分可见。搜索栏 列表的结构是通讯录产品的标准形态。2. 点击呼叫 Toast第二张截图是点击第一位成员张娜的呼叫按钮后的反馈弹出呼叫 张娜Toast—— 独立按钮闭包捕获m.name与整卡点击弹姓名双事件层级与首页同款。产品化后调起系统拨号拨打张娜电话。3. 点击成员卡姓名 Toast第三张截图是点击张娜卡片除 外的区域后的反馈弹出张娜Toast——整卡onClick闭包捕获m.name与 按钮事件互不干扰点 只弹呼叫 张娜、点卡面弹张娜双事件层级的正确性得到验证。产品化后整卡点击进入成员详情手机号/宿舍/备注。4. 通讯录页完整列表五成员全览第四张截图是通讯录页的完整列表五位成员全部可见张娜 在线 / 陈晨 在线 / 王杰 离线 / 刘洋 在线 / 李娜 离线在线/离线状态点与学号信息完整 按钮统一右侧。Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。七、扩展思考通讯录的检索与排序设计搜索栏 列表是通讯录的基础真实产品的检索排序更精细拼音首字母排序成员按姓名字母索引A-Z分组右侧字母导航条A/B/C...快速跳转——45 人用首字母分组是通讯录标配微信/手机通讯录同款。搜索的实时过滤输入关键字实时过滤姓名/学号 contains——onChange驱动的列表过滤无需提交按钮高亮匹配部分张标蓝。学号排序成员按学号升序2022010101 → 2022010105——学号是班级的自然排序键入学顺序比姓名排序更班级化。分组的扁平化45 人也可按老师/班委/普通同学分组首页已示核心角色——角色分组 字母排序两种组织方式可切换。搜索的历史搜索历史最近搜索的姓名在搜索栏下拉展示——高频联系人班长可一键直达减少重复输入。八、扩展思考通讯录的隐私与权限设计通讯录涉及个人敏感信息手机号/宿舍隐私设计是产品底线号码可见性我的页公开手机号开关Toggle——用户控制自己的手机号是否对同学可见关闭后他人通讯录中不显示号码仅可站内消息——隐私开关是通讯录产品的核心信任设计系列首次在个人中心出现隐私开关卡。分级可见号码可分全班可见/仅班委可见/仅老师可见——按角色分级控制可见范围。呼叫的权限呼叫需对方号码可见 系统电话权限ohos.permission.CALL_PHONE——权限申请需在首次呼叫时说明用途。学号的敏感性学号是半公开信息校园内但仍属个人数据——展示前应有隐私协议说明学号仅用于班级通讯录。数据的删除权用户可申请从班级通讯录移除转班/毕业——通讯录的被遗忘权。九、开发者视角通讯录页的调试与验证技巧搜索过滤的实现若接入过滤members.filter()后ForEach的 key 仍是原 id不冲突搜索空结果需空态未找到该同学——过滤 空态的联动测试。在线状态的渲染验证在线绿/离线灰两种Circle().fill()与文字颜色同步——三元分支正确性。双事件层级点 呼叫与点卡面姓名互不干扰——与首页同款测试。学号的展示宽度八位学号2022010101 姓名同行——窄屏下学号可能挤压Row内文本省略或缩小字号真机验证。数据自洽5 位成员与首页 3 位核心角色、班级页 45 人——展示样例 vs 总人数的口径需在文档中说明系列惯例。十、FAQ 与一句话总结Q1通讯录和首页的成员列表有什么区别首页是老师与班委3 位核心角色高频联系通讯录是全部成员含普通同学按学号/字母检索——高频角色置顶首页、全集列表在通讯录两级成员体系。Q2搜索栏现在能搜索吗Demo 展示不可交互——产品化后onChange过滤成员姓名/学号 contains 空态搜索栏是列表的过滤引擎入口当前占位了 UI 结构。Q3为什么成员带学号学号是班级成员的唯一标识支撑搜索姓名或学号的检索维度 学号排序的班级化组织——通讯录的班级属性通过学号体现区别于通用通讯录只按姓名。Q4呼叫在真实产品中如何实现调起系统拨号ohos.telephony或startAbility拨号盘传入号码——需号码可见我的页公开手机号开关控制 电话权限 是通话入口Toast 是原型占位。Q55 位成员就是全班吗不是——班级页统计总人数 455 位是当前展示的成员样例一屏可容真实产品分页/滚动展示全部 45 人——展示样例 vs 总人数的口径与系列惯例一致。一句话总结通讯录页以搜索栏 成员列表完成了班级成员的全集展示。 搜索姓名/学号的检索入口、姓名 学号双信息行、在线状态点绿/灰、 独立按钮与整卡的双事件层级——82 行代码一个信息完整、检索就绪的班级通讯录也是搜索 列表通讯录页面的标准参考。十一、系列横向对比通讯录页 vs 通用联系人页App 46 通讯录页是班级通讯录与通用手机联系人页对比可看清其班级化设计维度App 46 班级通讯录系统通讯录成员范围班级成员45 人全部联系人唯一标识学号电话号码排序方式学号/姓名拼音字母状态显示在线/离线无核心动作呼叫/查学号呼叫/发消息隐私维度班级内可见性系统级权限班级化的三点学号即身份成员带学号2022010101——学号是班级成员的唯一标识支撑搜索姓名或学号与学号排序这是系统通讯录没有的班级属性系统通讯录只按号码标识。在线状态系统通讯录无在线状态电话不需在线班级通讯录加了绿/灰点——因为找同学常在即时场景他在线吗状态点是班级通讯录的社交化补充。隐私可见性班级通讯录的公开手机号开关我的页是班级内可见性——系统通讯录的隐私是系统级权限班级通讯录多一层同学之间可见与否的社交隐私。通讯录从工具到班级社交的演化就是加上学号、状态、可见性这三个班级化元素。十二、扩展思考通讯录的分组与常用联系人通讯录页可扩展分组能力让 45 人的列表更易管理智能分组按角色分组老师/班委/普通同学首页已示核心角色 按宿舍分组1 栋 301 室——**角色分组组织视角与宿舍分组生活视角**双维度用户按需切换。常用联系人置顶12 常用联系人我的页统计置顶在列表头部类似首页老师与班委——高频联系零检索与搜索栏互补。标签系统成员可打标签篮球队老乡——自定义标签是通讯录的轻量分组类似微信标签支持找篮球队的张三。星座/生日成员资料可含生日纪念册的生日提醒联动——通讯录从联系方式升级为同学档案。分组与搜索的协同分组 搜索姓名/学号/标签双检索——分组管浏览、搜索管直达45 人规模的通讯录分组 搜索足以高效。十三、开发者视角通讯录页的调试与验证技巧搜索过滤的实现若接入过滤members.filter()后ForEach的 key 仍是原 id不冲突搜索空结果需空态未找到该同学——过滤 空态的联动测试。在线状态的渲染验证在线绿/离线灰两种Circle().fill()与文字颜色同步——三元分支正确性。双事件层级点 呼叫与点卡面姓名互不干扰——与首页同款测试。学号的展示宽度八位学号2022010101 姓名同行——窄屏下学号可能挤压Row内文本省略或缩小字号真机验证。数据自洽5 位成员与首页 3 位核心角色、班级页 45 人——展示样例 vs 总人数的口径需在文档中说明系列惯例。学号作为 key 的稳定性m.id.toString()用学号作 key——学号天然唯一且稳定入学不变是比 index 更优的 key 选择验证转班移除成员后列表 diff 正确。十四、FAQ 与一句话总结Q6搜索支持学号搜索吗占位文案搜索姓名或学号已暗示双维度——产品化后filter同时匹配姓名与学号name.includes(k) || id.includes(k)覆盖两种检索习惯。Q7成员能按字母排序吗当前按学号升序入学顺序班级化产品化可切换拼音首字母排序A-Z 分组 右侧字母导航——两种排序满足班级习惯与通用习惯。Q8在线状态在通讯录页和首页一致吗一致——同一成员张老师在首页与通讯录页的在线状态相同同一数据源Demo 两页数据独立产品化统一成员表驱动。Q9点击成员卡能看什么Demo 弹姓名 Toast。产品化后进入成员详情页手机号/学号/宿舍/标签/呼叫/发消息——成员卡是详情页入口详情页含呼叫与消息的完整联系动作。Q105 位成员为什么是男女混排的按学号升序自然排列学号不分性别——展示班级成员按学号组织的规则若按性别分组男生/女生也可当前学号序是班级的自然序。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏搜索栏成员列表、 呼叫呼叫张娜 Toast、成员卡点击张娜 Toast、完整列表五成员全览四个状态搜索栏、姓名学号双信息行、在线状态点、双事件层级均验证正常。张娜/陈晨/王杰/刘洋/李娜五人构成班级成员全集学号2022010101 等编码一致。整页 82 行代码完成搜索 成员全集的班级通讯录验收通过可作为通讯录列表页面的标准参考。补充一处细节观察通讯录页的学号2022010101并非随意数字——2022是入学年份、01是专业序号、01是班级序号、01-05是学号序号学号本身就是班级身份的编码2022 级 计算机专业 1 班 第 N 位同学。用户看到学号即可反推这是 2022 级计科的张三这种学号即身份的设计让通讯录的列表不仅可查联系方式还隐含着班级的组织结构信息谁先入学、学号顺序。而搜索栏搜索姓名或学号的占位文案正是对这一编码体系的呼应——两种检索维度都指向找到这位同学。若产品化后加入点击学号复制/跳转学号详情学号将从展示字段升级为可交互的身份入口通讯录的班级属性将更加立体。这些小而连贯的设计让 82 行代码的通讯录页在信息密度与班级特色上远超其体量。 整体而言通讯录页是全集列表的标准范式搜索栏负责检索、列表负责展示、在线状态与呼叫按钮负责联系三者各司其职又互相衔接——用户从找同学搜索/浏览到联系同学呼叫的完整路径在一页内闭环。若接入真实搜索过滤与分组导航本页即可无缝升级为生产级班级通讯录。
鸿蒙原生应用实战ArkTS 通讯录页搜索栏与成员卡片设计App 46「班级通讯录」通讯录页Func1Tab主题色#0984E3蓝色blue4 个 Tab 分别为首页、通讯录、班级、我的。通讯录页采用Header 搜索栏 成员列表三区布局——白色单行 Header班级通讯录20 号加粗搜索栏圆角 TextInput 占位搜索姓名或学号 图标不可交互展示SectionTitle全部成员 5 位成员 张娜 / 陈晨 / 王杰 / 刘洋 / 李娜每条含 42×42 蓝底圆头像 姓名 学号 在线状态点 呼叫按钮。本篇基于46-class-contacts/entry/src/main/ets/pages/Func1Tab.ets共 82 行逐段拆解附 4 张实机截图。一、整体结构三区Header 搜索 成员列表布局通讯录页是品牌头部 搜索入口 成员清单的三区布局——2 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 12 }) { this.SearchBar() this.SectionTitle(全部成员) this.MemberList() } .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— 单行品牌头班级通讯录SearchBar— 搜索姓名/学号的入口成员多时的定位工具MemberList— 全部成员 5 位成员列表Demo 展示 5 位班级页统计为 45 人通讯录页是首页老师与班委的全集扩展——首页只列 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高度、白底、底部对齐——系列二级页统一范式。三、SearchBar搜索栏SearchBar() { Row({ space: 8 }) { Text().fontSize(16) TextInput({ placeholder: 搜索姓名或学号 }).fontSize(14) .backgroundColor(Color.Transparent).layoutWeight(1) } .width(100%).padding({ left: 12, right: 12, top: 10, bottom: 10 }) .backgroundColor(C.cardSoft).borderRadius(D.rMd) }技术拆解 图标 透明输入框Text()TextInput透明背景、layoutWeight(1)撑开组合成搜索栏—— 是搜索的通用视觉锚点透明输入框融入浅底容器。浅底圆角容器cardSoft浅蓝灰底 圆角 14 内边距 12/10——胶囊形搜索框是通讯录/列表类产品的标配微信/通讯录同款。占位文案搜索姓名或学号——两种检索维度姓名/学号都提示覆盖通讯录的检索需求。产品化实现Demo 输入框不可交互无 onChange 过滤——产品化后onChange过滤成员列表members.filter(m m.name.includes(keyword) || m.id.includes(keyword))搜索栏是列表的过滤引擎入口。四、MemberList成员列表MemberList() { Column({ space: 12 }) { ForEach(this.members, (m: Member) { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(20) } .width(42).height(42).backgroundColor(C.primarySoft).borderRadius(21).justifyContent(FlexAlign.Center) Column({ space: 3 }) { Row({ space: 6 }) { Text(m.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(m.id).fontSize(11).fontColor(C.textDim) }.alignItems(VerticalAlign.Center) Row({ space: 5 }) { Circle().width(7).height(7).fill(m.online ? C.ok : C.textDim) Text(m.online ? 在线 : 离线).fontSize(11).fontColor(m.online ? C.ok : C.textDim) } }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text().fontSize(16) .padding(8).backgroundColor(C.primarySoft).borderRadius(16) .onClick(() { promptAction.showToast({ message: 呼叫 m.name }); }) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: m.name }); }) }, (m: Member) m.id.toString()) }.width(100%) }5 位成员19-27 行成员emoji学号在线张娜2022010101在线陈晨2022010102在线王杰2022010103离线刘洋2022010104在线李娜2022010105离线卡片细节头像42×42 蓝底圆 20 号 /——按性别区分的学生 emoji男生 / 女生 。姓名 学号14 号 Medium 姓名 11 号浅灰学号2022010101 八位学号同行——学号是班级成员的唯一标识与姓名并列展示支撑搜索姓名或学号的检索维度。在线状态点与首页同款Circle()绿/灰点 在线/离线文字——通讯录页与首页共享同一状态组件模式用户已经熟悉绿点 在线。 呼叫16 号 8 padding 蓝底圆角 16——与首页同款 独立按钮 整卡双事件层级。keym.id.toString()稳定唯一此处 id 是学号天然唯一且稳定。5 位 vs 45 人的口径Demo 展示 5 位成员、班级页统计总人数 45——5 是当前展示的成员样例、45 是全班成员总数口径分层与 App 44 相册8 张展示/256 张总数同款口径设计。五、跨页数据自洽通讯录页是成员的全集通讯录页与首页、班级页的联动张娜/陈晨/王杰/刘洋/李娜↔ 首页张老师/王班长/陈生委——首页是核心角色老师班委、通讯录是全部成员含普通同学两者构成高频 全集的成员体系。学号体系↔ 我的页个人资料学号字段——每位成员有唯一学号2022010101 等我的页展示本人学号通讯录展示他人学号。在线状态↔ 首页在线状态点——同一状态组件两页复用状态语义一致。45 人↔ 首页45 名成员、班级页总人数 45——通讯录是 45 人的全集Demo 展示 5 位为样例。六、实机截图与交互演示本节结合 4 张实机截图逐张还原通讯录页的视觉效果与交互过程。1. 通讯录页首屏搜索栏 成员列表第一张截图是通讯录页默认首屏顶部班级通讯录标题下方搜索栏—— 图标 圆角浅底输入框占位搜索姓名或学号全部成员标题下是第一位成员—— 张娜2022010101 / 绿色在线点 / 第二位 陈晨部分可见。搜索栏 列表的结构是通讯录产品的标准形态。2. 点击呼叫 Toast第二张截图是点击第一位成员张娜的呼叫按钮后的反馈弹出呼叫 张娜Toast—— 独立按钮闭包捕获m.name与整卡点击弹姓名双事件层级与首页同款。产品化后调起系统拨号拨打张娜电话。3. 点击成员卡姓名 Toast第三张截图是点击张娜卡片除 外的区域后的反馈弹出张娜Toast——整卡onClick闭包捕获m.name与 按钮事件互不干扰点 只弹呼叫 张娜、点卡面弹张娜双事件层级的正确性得到验证。产品化后整卡点击进入成员详情手机号/宿舍/备注。4. 通讯录页完整列表五成员全览第四张截图是通讯录页的完整列表五位成员全部可见张娜 在线 / 陈晨 在线 / 王杰 离线 / 刘洋 在线 / 李娜 离线在线/离线状态点与学号信息完整 按钮统一右侧。Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。七、扩展思考通讯录的检索与排序设计搜索栏 列表是通讯录的基础真实产品的检索排序更精细拼音首字母排序成员按姓名字母索引A-Z分组右侧字母导航条A/B/C...快速跳转——45 人用首字母分组是通讯录标配微信/手机通讯录同款。搜索的实时过滤输入关键字实时过滤姓名/学号 contains——onChange驱动的列表过滤无需提交按钮高亮匹配部分张标蓝。学号排序成员按学号升序2022010101 → 2022010105——学号是班级的自然排序键入学顺序比姓名排序更班级化。分组的扁平化45 人也可按老师/班委/普通同学分组首页已示核心角色——角色分组 字母排序两种组织方式可切换。搜索的历史搜索历史最近搜索的姓名在搜索栏下拉展示——高频联系人班长可一键直达减少重复输入。八、扩展思考通讯录的隐私与权限设计通讯录涉及个人敏感信息手机号/宿舍隐私设计是产品底线号码可见性我的页公开手机号开关Toggle——用户控制自己的手机号是否对同学可见关闭后他人通讯录中不显示号码仅可站内消息——隐私开关是通讯录产品的核心信任设计系列首次在个人中心出现隐私开关卡。分级可见号码可分全班可见/仅班委可见/仅老师可见——按角色分级控制可见范围。呼叫的权限呼叫需对方号码可见 系统电话权限ohos.permission.CALL_PHONE——权限申请需在首次呼叫时说明用途。学号的敏感性学号是半公开信息校园内但仍属个人数据——展示前应有隐私协议说明学号仅用于班级通讯录。数据的删除权用户可申请从班级通讯录移除转班/毕业——通讯录的被遗忘权。九、开发者视角通讯录页的调试与验证技巧搜索过滤的实现若接入过滤members.filter()后ForEach的 key 仍是原 id不冲突搜索空结果需空态未找到该同学——过滤 空态的联动测试。在线状态的渲染验证在线绿/离线灰两种Circle().fill()与文字颜色同步——三元分支正确性。双事件层级点 呼叫与点卡面姓名互不干扰——与首页同款测试。学号的展示宽度八位学号2022010101 姓名同行——窄屏下学号可能挤压Row内文本省略或缩小字号真机验证。数据自洽5 位成员与首页 3 位核心角色、班级页 45 人——展示样例 vs 总人数的口径需在文档中说明系列惯例。十、FAQ 与一句话总结Q1通讯录和首页的成员列表有什么区别首页是老师与班委3 位核心角色高频联系通讯录是全部成员含普通同学按学号/字母检索——高频角色置顶首页、全集列表在通讯录两级成员体系。Q2搜索栏现在能搜索吗Demo 展示不可交互——产品化后onChange过滤成员姓名/学号 contains 空态搜索栏是列表的过滤引擎入口当前占位了 UI 结构。Q3为什么成员带学号学号是班级成员的唯一标识支撑搜索姓名或学号的检索维度 学号排序的班级化组织——通讯录的班级属性通过学号体现区别于通用通讯录只按姓名。Q4呼叫在真实产品中如何实现调起系统拨号ohos.telephony或startAbility拨号盘传入号码——需号码可见我的页公开手机号开关控制 电话权限 是通话入口Toast 是原型占位。Q55 位成员就是全班吗不是——班级页统计总人数 455 位是当前展示的成员样例一屏可容真实产品分页/滚动展示全部 45 人——展示样例 vs 总人数的口径与系列惯例一致。一句话总结通讯录页以搜索栏 成员列表完成了班级成员的全集展示。 搜索姓名/学号的检索入口、姓名 学号双信息行、在线状态点绿/灰、 独立按钮与整卡的双事件层级——82 行代码一个信息完整、检索就绪的班级通讯录也是搜索 列表通讯录页面的标准参考。十一、系列横向对比通讯录页 vs 通用联系人页App 46 通讯录页是班级通讯录与通用手机联系人页对比可看清其班级化设计维度App 46 班级通讯录系统通讯录成员范围班级成员45 人全部联系人唯一标识学号电话号码排序方式学号/姓名拼音字母状态显示在线/离线无核心动作呼叫/查学号呼叫/发消息隐私维度班级内可见性系统级权限班级化的三点学号即身份成员带学号2022010101——学号是班级成员的唯一标识支撑搜索姓名或学号与学号排序这是系统通讯录没有的班级属性系统通讯录只按号码标识。在线状态系统通讯录无在线状态电话不需在线班级通讯录加了绿/灰点——因为找同学常在即时场景他在线吗状态点是班级通讯录的社交化补充。隐私可见性班级通讯录的公开手机号开关我的页是班级内可见性——系统通讯录的隐私是系统级权限班级通讯录多一层同学之间可见与否的社交隐私。通讯录从工具到班级社交的演化就是加上学号、状态、可见性这三个班级化元素。十二、扩展思考通讯录的分组与常用联系人通讯录页可扩展分组能力让 45 人的列表更易管理智能分组按角色分组老师/班委/普通同学首页已示核心角色 按宿舍分组1 栋 301 室——**角色分组组织视角与宿舍分组生活视角**双维度用户按需切换。常用联系人置顶12 常用联系人我的页统计置顶在列表头部类似首页老师与班委——高频联系零检索与搜索栏互补。标签系统成员可打标签篮球队老乡——自定义标签是通讯录的轻量分组类似微信标签支持找篮球队的张三。星座/生日成员资料可含生日纪念册的生日提醒联动——通讯录从联系方式升级为同学档案。分组与搜索的协同分组 搜索姓名/学号/标签双检索——分组管浏览、搜索管直达45 人规模的通讯录分组 搜索足以高效。十三、开发者视角通讯录页的调试与验证技巧搜索过滤的实现若接入过滤members.filter()后ForEach的 key 仍是原 id不冲突搜索空结果需空态未找到该同学——过滤 空态的联动测试。在线状态的渲染验证在线绿/离线灰两种Circle().fill()与文字颜色同步——三元分支正确性。双事件层级点 呼叫与点卡面姓名互不干扰——与首页同款测试。学号的展示宽度八位学号2022010101 姓名同行——窄屏下学号可能挤压Row内文本省略或缩小字号真机验证。数据自洽5 位成员与首页 3 位核心角色、班级页 45 人——展示样例 vs 总人数的口径需在文档中说明系列惯例。学号作为 key 的稳定性m.id.toString()用学号作 key——学号天然唯一且稳定入学不变是比 index 更优的 key 选择验证转班移除成员后列表 diff 正确。十四、FAQ 与一句话总结Q6搜索支持学号搜索吗占位文案搜索姓名或学号已暗示双维度——产品化后filter同时匹配姓名与学号name.includes(k) || id.includes(k)覆盖两种检索习惯。Q7成员能按字母排序吗当前按学号升序入学顺序班级化产品化可切换拼音首字母排序A-Z 分组 右侧字母导航——两种排序满足班级习惯与通用习惯。Q8在线状态在通讯录页和首页一致吗一致——同一成员张老师在首页与通讯录页的在线状态相同同一数据源Demo 两页数据独立产品化统一成员表驱动。Q9点击成员卡能看什么Demo 弹姓名 Toast。产品化后进入成员详情页手机号/学号/宿舍/标签/呼叫/发消息——成员卡是详情页入口详情页含呼叫与消息的完整联系动作。Q105 位成员为什么是男女混排的按学号升序自然排列学号不分性别——展示班级成员按学号组织的规则若按性别分组男生/女生也可当前学号序是班级的自然序。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏搜索栏成员列表、 呼叫呼叫张娜 Toast、成员卡点击张娜 Toast、完整列表五成员全览四个状态搜索栏、姓名学号双信息行、在线状态点、双事件层级均验证正常。张娜/陈晨/王杰/刘洋/李娜五人构成班级成员全集学号2022010101 等编码一致。整页 82 行代码完成搜索 成员全集的班级通讯录验收通过可作为通讯录列表页面的标准参考。补充一处细节观察通讯录页的学号2022010101并非随意数字——2022是入学年份、01是专业序号、01是班级序号、01-05是学号序号学号本身就是班级身份的编码2022 级 计算机专业 1 班 第 N 位同学。用户看到学号即可反推这是 2022 级计科的张三这种学号即身份的设计让通讯录的列表不仅可查联系方式还隐含着班级的组织结构信息谁先入学、学号顺序。而搜索栏搜索姓名或学号的占位文案正是对这一编码体系的呼应——两种检索维度都指向找到这位同学。若产品化后加入点击学号复制/跳转学号详情学号将从展示字段升级为可交互的身份入口通讯录的班级属性将更加立体。这些小而连贯的设计让 82 行代码的通讯录页在信息密度与班级特色上远超其体量。 整体而言通讯录页是全集列表的标准范式搜索栏负责检索、列表负责展示、在线状态与呼叫按钮负责联系三者各司其职又互相衔接——用户从找同学搜索/浏览到联系同学呼叫的完整路径在一页内闭环。若接入真实搜索过滤与分组导航本页即可无缝升级为生产级班级通讯录。
