HarmonyOS实战开发-如何实现联系人列表通(仿微信通讯录) ...

先看效果

直入主题

UI布局
Stack帧布局容器+List联系人列表+AlphabetIndexer字母索引器
实现代码

1. 先定义好假数据
• 通讯录列表数据

1. private dataList: any = [
2.     {
3.       title: '',
4.       contactList: [
5.         { name: "新的朋友", head: $r("app.media.ic_new_friend") },
6.         { name: "群聊", head: $r("app.media.ic_group_chat") },
7.         { name: "标签", head: $r("app.media.ic_tag") },
8.         { name: "公众号", head: $r("app.media.ic_official_account") }
9.       ]
10.     },
11.     {
12.       title: 'A',
13.       contactList: [
14.         { name: "ArdWard", head: $r("app.media.ic_user_head2") },
15.         { name: "阿联酋", head: $r("app.media.ic_user_head3") },
16.         { name: "艾森宝", head: $r("app.media.ic_user_head6") }
17.       ]
18.     },
19. .....忽略中间数据
20.     {
21.       title: 'Z',
22.       contactList: [
23.         { name: "猪八戒", head: $r("app.media.ic_user_head3") },
24.         { name: "张宇恒", head: $r("app.media.ic_user_head4") },
25.         { name: "周大年", head: $r("app.media.ic_user_head5") }
26.       ]
27.     }
28.   ]

复制代码

• 字母索引器列表数据

1. private letterList: string[] = ['↑', '☆', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#']

复制代码

2. 再举行UI开发

从上文dataList数据布局里可以看出，我做了List嵌套List布局方式以适用通讯录中大组标签(A，B，C…)和它们各自的联系人列表，好在鸿蒙原生组件也支持了这样的列表模式：

1. List(整体列表)  --> ListItemGroup(A,B,C...组标签)  ---> ListItem（联系人列表）

复制代码

• 那么直接代码实现列表：

1. build() {
2.     Stack({ alignContent: Alignment.End }) {
4.       Column() {
5.         // 标题栏
6.         WechatToolbar({ title: "通讯录" })
7.         // 通讯录列表
8.         List({ scroller: this.scroller }) {
9.         // 遍历循环大组标签
10.           ForEach(this.dataList, (item) => {
11.             // 大组标签
12.             ListItemGroup({ header: this.itemHead(item.title) }) {
13.               // 遍历循环大组内的联系人列表
14.               ForEach(item.contactList, (contact) => {
15.                 // 小组联系人列表
16.                 ListItem() {
17.                   ListContactItem({ head: contact.head, name: contact.name })
18.                 }
19.                 .onClick(()=>{
20.                   router.pushUrl({ url: 'pages/chat/ChatPage',
21.                     params: { name: contact.name}
22.                   })
23.                 })
24.               })
25.             }
26.             .divider({ strokeWidth: 0.8, color: '#f0f0f0', startMargin: 85, endMargin: 0 }) // 每行之间的分界线
27.           })
28.         }
29.         .width('100%')
30.         .height(0)
31.         .layoutWeight(1)
32.         .backgroundColor(Color.White)
33.       }
34.       .width("100%")
35.       .height("100%")
37.     ...... 忽略部分代码
39.     }.width("100%")
40.     .height("100%")
42. }
43.   
44.   
45. @Builder itemHead(title: string) {
46.     Text(title)
47.       .fontSize(14)
48.       .visibility("" === title ? Visibility.None : Visibility.Visible)
49.       .backgroundColor("#EDEDED")
50.       .height(36)
51.       .width("100%")
52.       .padding({ left: 20 })
53. }

复制代码

• 字母索引器也有原生组件支持，直接看实现代码：

1. AlphabetIndexer({ arrayValue: this.letterList, selected: 0 })
2.         .color(Color.Black)
3.         .font({ size: 14 })
4.         .selectedFont({ size: 14 })
5.         .selectedColor(Color.Black)
6.         .selectedBackgroundColor(Color.Transparent)
7.         .usingPopup(true)
8.         .popupColor(Color.White)
9.         .popupBackground("#57be6a")
10.         .popupFont({ size: 32, weight: FontWeight.Bolder })
11.         .itemSize(20)
12.         .alignStyle(IndexerAlign.Right)
13.         .margin({ top: 80 })
14.         .onSelect((index: number) => {
15.           let letter = this.letterList[index]
16.           var target: number = 0
17.           for (const item of this.dataList) {
18.             if (letter === item.title) {
19.               this.scroller.scrollToIndex(target)
20.               prompt.showToast({ message: "" + target })
21.               break
22.             }
23.             target++
24.           }
25.     })

复制代码

关键点在于AlphabetIndexer的onSelect事件中使用List的scroller举行滚动锚定，即：点击索引器的任意字母，联系人列表会自动跟着同步滚动。
末了贴下联系人自定义组件代码：

1. @Preview
2. @Component
3. export default struct ListContactItem {
4.   private head: string | PixelMap | Resource
5.   private name: string
7.   build() {
8.     Row() {
9.       Image(this.head)
10.         .width(46)
11.         .height(46)
12.         .borderRadius(4)
13.         .margin({ left: 20, right: 15 })
14.         .objectFit(ImageFit.Cover)
16.       Text(this.name)
17.         .fontSize(19)
18.         .fontWeight(500)
19.         .width("100%")
20.         .layoutWeight(1)
21.         .maxLines(1)
22.         .textOverflow({ overflow: TextOverflow.Ellipsis })
23.         .margin({ right: 30 })
24.         .fontColor(Color.Black)
25.     }
26.     .backgroundColor(Color.White)
27.     .width("100%")
28.     .height(60)
29.   }
30. }

复制代码

如果各人还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、讲授视频》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙相干开发资料等…渴望对各人有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.根本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.背景任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。