HarmonyOS7完整通讯录列表页实战：联系人分组、索引与资料卡片组织

文章目录前言页面骨架其实比参数更重要看懂状态比看懂样式更重要真正决定页面行为的是这些函数第一段关键代码页面是怎么被带起来的第二段关键代码真正决定交互手感的地方这一页我建议这样上手从示例到项目中间这几步别省这类实现为什么比文档片段更有用完整代码收个尾前言通讯录页面是个很典型的综合型列表页既要有索引跳转又要把头像、姓名、部门、状态这些信息放稳。这个案例比前面的单点示例更完整也更像一个真实产品页面。 如果你手上正好有类似页面要做那这篇文章最好不要只当教程看。我更建议你边看边想这一段如果换成我自己的业务数据需不需要改状态需不需要拆组件。别看这个案例篇幅不算长但它很适合拿来练“页面目标和代码结构怎么对齐”这件事。你后面不管是复刻还是准备拆成自己的业务组件都会更顺。这类写法尤其适合落在 企业通讯录、CRM 联系人、社交好友列表 这些场景里所以我下面不会只讲“组件怎么写”而是更关心“放进页面之后为什么这样组织”。页面骨架其实比参数更重要我建议先不要着急顺着源码往下滚。先回答一个更实际的问题完整通讯录列表页 这个页面用户一进来第一眼会看到什么接着又会去操作哪里。结构感一旦建立起来后面的代码就不容易看散。页面区域主要职责在代码里的典型表现头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案核心展示区承载组件能力的主要效果Column、Row、业务组件本体辅助信息区补充状态、标签、分组或统计信息次级文本、角标、分组标题、描述块交互入口区负责切换、返回、定位、选择等动作点击事件、按钮、索引条、导航入口页面里额外定义的数据模型包括Contact。如果后面准备接接口我更建议把这些类型继续收口成更直白的业务命名。单个组件 API 不难难的是和其他布局、容器、交互拼在一起之后还不乱这篇会重点讲这个。看懂状态比看懂样式更重要完整通讯录页面最怕两件事索引能点但列表跟不上列表信息很多但用户找不到人。这页的状态就是围绕这两个问题组织的。isShow控制示例是否展示。selectedIndex记录当前选中的分组索引驱动右侧 AlphabetIndexer 的高亮。listScroller把索引选择落到左侧分组列表的滚动位置。Contact模型里放了姓名、电话和头像色这让每一行都不只是文本而是更接近真实通讯录资料卡。后面接接口时建议继续保持“分组字段”和“联系人详情字段”分开别把索引逻辑散落到 UI 里。真正决定页面行为的是这些函数读函数别贪多。对 完整通讯录列表页 这种页面来说真正有阅读价值的往往是那几段会改状态、触发交互或者推动页面切换的逻辑。这个案例没有太多额外方法核心价值主要集中在页面结构和组件组合方式。我自己读这类方法时通常只抓一条线谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来很多交互代码一下就顺了。第一段关键代码页面是怎么被带起来的这一段建议慢一点看。它通常决定了页面初始状态也决定了后续哪些区域会跟着刷新。StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){Column(){if(this.isShow){Column({space:12}){Text(通讯录).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Row(){List({scroller:this.listScroller}){ForEach(sortedGroupKeys,(group:string){ListItemGroup(){ListItem(){Text(group).fontSize(14).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR).width(100%).padding({left:12,top:6,bottom:3})这一段我通常不会一下翻过去而是先确认下面这几个判断点State字段到底在控制显示、选择、跳转结果还是模式切换。默认值是不是合理页面一打开会不会就落在一个可理解的状态上。字段命名能不能让后来的人一眼看懂用途而不是还要翻半天 UI。第二段关键代码真正决定交互手感的地方这一段完整代码值得从数据模型开始看。contactGroups先按字母把联系人分好组sortedGroupKeys再决定页面渲染顺序ListItemGroup负责把每组内容铺到列表里。右侧 AlphabetIndexer 只是入口真正支撑通讯录体验的是这套稳定的分组结构。/** * 完整通讯录列表页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesinterfaceContact{name:stringphone:stringavatarColor:string}constcontactGroups:Recordstring,Contact[]{A:[{name:Alice Wang,phone:138****1234,avatarColor:#E91E63},{name:Amy Chen,phone:139****5678,avatarColor:#9C27B0},{name:Andrew Liu,phone:136****9012,avatarColor:#673AB7}],B:[{name:Bob Zhang,phone:137****3456,avatarColor:#3F51B5},{name:Betty Li,phone:135****7890,avatarColor:#2196F3}],C:[{name:Carl Wu,phone:188****2345,avatarColor:#009688},{name:Chris Yang,phone:186****6789,avatarColor:#00BCD4},{name:Cindy Sun,phone:158****0123,avatarColor:#4CAF50}],D:[{name:David Huang,phone:150****4567,avatarColor:#8BC34A},{name:Diana Zhao,phone:151****8901,avatarColor:#CDDC39}],E:[{name:Edward Xu,phone:182****2346,avatarColor:#FF9800},{name:Ella Ma,phone:183****6780,avatarColor:#FF5722}],代码读到这里我通常会顺手补三件事不然后面很容易只看热闹这个交互入口接收的到底是什么输入。输入进来之后代码改了哪个状态或者触发了哪次导航。变化发生后用户最先感知到的反馈会落在哪个区域。这三个问题串起来之后这一页基本就不只是“看过”而是真的读懂了。这一页我建议这样上手文章讲再多都不如自己把页面点一遍。尤其是 完整通讯录列表页 这种带明显交互结果的页面只看代码很难建立手感。先进入页面确认首屏是不是把完整通讯录列表页的主题交代清楚。盯住核心展示区观察默认状态下最醒目的内容是什么。主动触发一次关键交互比如点击、滑动、跳转、返回、切换或者选择。回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。最后再打开源码对照刚才那次交互把状态变化链路串起来。如果这五步你能边操作边说清楚页面发生了什么后面再换成自己的数据和交互心里会稳很多。从示例到项目中间这几步别省示例页最大的风险就是你觉得“这不难”结果真要迁进项目里发现数据、样式、交互边界全要补。这里提前把这些坑说开。字母索引类页面建议先把分组数据结构稳定下来再去调索引条样式和反馈层。一旦页面里还要加搜索、筛选或定位结果状态来源最好先分层不然后面很容易互相覆盖。只要页面里有重复块就别硬撑着手写到底早点抽成小组件后面改样式和改交互都会轻松很多。示例数据最好和布局代码分开放不然后面一接接口页面文件很容易立刻变臃肿。这类实现为什么比文档片段更有用它真正值得保留的地方不只是效果能跑出来而是写法相对克制。你以后回来翻会发现它很适合当中间层模板。页面结构比较稳后续不管是换数据还是换皮肤成本都不会特别高。状态数量总体可控适合拿来练“一个页面里如何分配职责”这件事。组件参数和页面目标之间关系比较直观不太会出现“能跑但看不懂为什么这么配”的情况。完整代码下面保留整理过命名的完整 ArkTS 代码方便你直接对照学习。这里已经去掉原始的 Demo 命名改成了更贴近当前案例语义的名称。/** * 完整通讯录列表页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesinterfaceContact{name:stringphone:stringavatarColor:string}constcontactGroups:Recordstring,Contact[]{A:[{name:Alice Wang,phone:138****1234,avatarColor:#E91E63},{name:Amy Chen,phone:139****5678,avatarColor:#9C27B0},{name:Andrew Liu,phone:136****9012,avatarColor:#673AB7}],B:[{name:Bob Zhang,phone:137****3456,avatarColor:#3F51B5},{name:Betty Li,phone:135****7890,avatarColor:#2196F3}],C:[{name:Carl Wu,phone:188****2345,avatarColor:#009688},{name:Chris Yang,phone:186****6789,avatarColor:#00BCD4},{name:Cindy Sun,phone:158****0123,avatarColor:#4CAF50}],D:[{name:David Huang,phone:150****4567,avatarColor:#8BC34A},{name:Diana Zhao,phone:151****8901,avatarColor:#CDDC39}],E:[{name:Edward Xu,phone:182****2346,avatarColor:#FF9800},{name:Ella Ma,phone:183****6780,avatarColor:#FF5722}],F:[{name:Frank Gao,phone:159****1357,avatarColor:#795548}],G:[{name:Grace Feng,phone:133****2468,avatarColor:#607D8B},{name:George Lin,phone:177****3579,avatarColor:#E91E63}],}constsortedGroupKeys:string[]Object.keys(contactGroups).sort()EntryComponentstruct ContactsDirectoryFullList{StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){Column(){if(this.isShow){Column({space:12}){Text(通讯录).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Row(){List({scroller:this.listScroller}){ForEach(sortedGroupKeys,(group:string){ListItemGroup(){ListItem(){Text(group).fontSize(14).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR).width(100%).padding({left:12,top:6,bottom:3}).backgroundColor(#F5F5F5)}ForEach(contactGroups[group]asContact[],(contact:Contact){ListItem(){Row({space:12}){// AvatarText(contact.name.charAt(0)).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).width(42).height(42).textAlign(TextAlign.Center).backgroundColor(contact.avatarColor).borderRadius(21)// InfoColumn({space:2}){Text(contact.name).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#333333)Text(contact.phone).fontSize(12).fontColor(#999999)}.alignItems(HorizontalAlign.Start).layoutWeight(1).padding({top:4,bottom:4})}.width(100%).padding({left:12,right:12,top:4,bottom:4})}})}})}.layoutWeight(1).height(340).divider({strokeWidth:0.5,color:#EEEEEE}).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)AlphabetIndexer({arrayValue:sortedGroupKeys,selected:this.selectedIndex}).selectedColor(DEMO_THEME_COLOR).popupColor(#FFFFFF).popupBackground(DEMO_THEME_COLOR).usingPopup(true).selectedBackgroundColor(#E8EAF6).itemSize(12).onSelect((index:number){this.selectedIndexindexthis.listScroller.scrollToIndex(index)})}.width(100%).height(340)// 底部统计Row({space:20}){Row({space:4}){Text(联系人).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text(sortedGroupKeys.length 组).fontSize(12).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)}Row({space:4}){Text(索引).fontSize(12).fontColor(DEMO_SUBTEXT_COLOR)Text(A-G).fontSize(12).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)}}.width(100%).justifyContent(FlexAlign.Center)}.alignItems(HorizontalAlign.Start)}Text(完整通讯录列表页 - 通讯录场景).fontSize(12).fontColor(#999999).margin({top:12})}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}收个尾我会把 完整通讯录列表页 归到“代码不长但值得留档”的那类示例里。以后遇到同类页面回来翻它比重新猜一遍状态和结构靠谱得多。