鸿蒙实战开发-如何按字母分组展示联系人

场景说明

在通讯录中，需要将联系人按照姓氏的首字母进行分组分列，从而更方便联系人的查找；联系人列表右侧的字母导航可以随列表的滑动而定位到对应字母处；同时，也可以通过字母导航控制列表跳到指定联系人分组。 本例即为大家介绍如何实现上述场景。
效果呈现

本示例最终效果如下：

环境要求

• IDE：DevEco Studio 3.1 Beta1
  
• SDK：Ohos_sdk_public 3.2.11.9 (API Version9 Release)
  

实现思路

本例涉及的四个关键特性及其实现方案如下：

• 联系人按字母分组展示：通过List组件显示联系人列表，通过ListItemGroup组件实现联系人分组。
  
• 联系人右侧呈现字母导航：使用AlphabetIndexer组件实现字母导航，同时通过Stack组件使字母导航浮在联系人列表右侧。
  
• 滑动联系人列表，右侧字母导航随之变动：通过List组件的onScrollIndex事件获取到联系人列表的滑动位置，并将该位置索引传递给字母导航的selected属性，作为字母导航的被选中项。
  
• 通过右侧字母导航控制联系人列表滑动到指定分组：通过字母导航的onSelected事件获取选中字母的索引，并将该索引传递给联系人列表的控制器，控制列表滑动到指定分组。
  

开发步骤

针对上述关键特性，详细实现步骤如下：
1、通过Stack、List、ListItemGroup、AlphabetIndexer等关键组件将UI框架搭建起来。 先构建列表数据，其中Contact为联系人数据类。

1. contactGroups: object[] = [
2.    ...
3.     {
4.       title: 'D',
5.       contacts: [
6.         new Contact('Donna', $r('app.media.contact6')),
7.         new Contact('朵朵', $r('app.media.contact1')),
8.       ],
9.     },
10.     ...
11.     {
12.       title: 'K',
13.       contacts: [
14.         new Contact('孔孔', $r('app.media.contact2')),
15.         new Contact('康康', $r('app.media.contact3')),
16.       ],
17.     },
18.     {
19.       title: 'L',
20.       contacts: [
21.         new Contact('Lisa', $r('app.media.contact4')),
22.         new Contact('玲玲', $r('app.media.contact5')),
23.       ],
24.     },
25.     {
26.       title: 'N',
27.       contacts: [
28.         new Contact('牛牛', $r('app.media.contact6')),
29.         new Contact('Natasha', $r('app.media.contact1')),
30.       ],
31.     },
32.     ...
33.   ]

复制代码

有了列表数据后，我们来构建UI框架，关键代码如下：

1. @Entry
2. @Component
3. struct ContactList{
4.   ...
5.   // 自定义组件groupHeader，作为ListItemGroup的头部组件，即A、B、C等字母列表项
6.   @Builder groupHeader(titleLetter:string){
7.     Text(titleLetter)
8.       .fontSize(20)
9.       .backgroundColor('#fff1f3f5')
10.       .width('100%')
11.       .padding(5)
12.   }
13.   // 创建字母列表作为字母导航的内容
14.   private alphabets:string[] = [ 'A', 'B', 'D', 'G', 'K', 'L', 'N', 'X'];
16.   build() {
17.     Stack({alignContent:Alignment.End}){
18.       List(){
19.         // 循环渲染列表内容
20.         ForEach(this.contactGroups,contactGroup=>{
21.           // 采用ListItemGroup对联系人进行分组，将groupHeader作为ListItemGroup的头部组件
22.           ListItemGroup({header:this.groupHeader(contactGroup.title)}){
23.             ForEach(contactGroup.contacts,contact=>{
24.               ListItem(){
25.                 Column(){
26.                   Row(){
27.                     Image(contact.icon)
28.                       ...
29.                     Text(contact.name)
30.                   }
31.                   ...
32.                   Divider().color('#fff1f3f5')
33.                 }
34.                 ...
35.               }
36.             })
37.           }
38.         })
39.       }
40.       ...
41.       // 使用AlphabetIndexer组件实现右侧字母导航
42.       AlphabetIndexer({arrayValue:this.alphabets,selected:0})
43.         ...
44.     }
45.   }
46. }

复制代码

完成上述代码，我们的框架就搭建起来了，如图：

2、接下来为UI框架添加逻辑控制。首先，通过List的onScrollIndex事件获取到列表滑动位置的索引，并将索引同步给右侧字母表的selected属性，从而在滑动联系人时，使右侧字母导航随之变动，关键代码如下：

1.   ...
2.   // 创建动态变量，用于指定字母导航的选择项
3.   @State selectedIndex:number = 0;
4.   ...
5.   build() {
6.     Stack({alignContent:Alignment.End}){
7.       List({scroller:this.listScroller}){
8.         ForEach(this.contactGroups,contactGroup=>{
9.           ListItemGroup({header:this.groupHeader(contactGroup.title)}){
10.             ForEach(contactGroup.contacts,contact=>{
11.               ListItem(){
12.                 ...
13.               }
14.             })
15.           }
16.         })
17.       }
18.       ...
19.       // 获取联系人列表滑动位置的索引，并将索引通过selectedIndex同步给右侧字母导航
20.       .onScrollIndex((firstIndex:number)=>{
21.         this.selectedIndex = firstIndex
22.       })
23.       AlphabetIndexer({arrayValue:this.alphabets,selected:0})
24.         ...
25.         // 指定字母导航的选择项为selectedIndex，完成跟联系人列表的同步
26.         .selected(this.selectedIndex)
27.         ...
28.     }
29.   }

复制代码

至此，当我们滑动联系人列表时，就可以让右侧字母导航随之变动了。效果如下：

3、末了，我们通过AlphabetIndexer组件的onSelect事件获取到字母导航选择项的索引，然后通过List组件的scroller控制器控制联系人列表滑动到相同的索引处，从而实现通过右侧字母导航控制联系人列表滑动到指定分组。关键代码如下：

1. ...
2.   @State selectedIndex:number = 0;
3.   // 创建List组件的scroller控制器：listScroller，用于控制联系人列表的滑动位置
4.   private listScroller:Scroller = new Scroller()
5.   ...
6.   build() {
7.     Stack({alignContent:Alignment.End}){
8.       // 将scroller控制器绑定到List组件
9.       List({scroller:this.listScroller}){
10.         ForEach(this.contactGroups,contactGroup=>{
11.           ListItemGroup({header:this.groupHeader(contactGroup.title)}){
12.             ForEach(contactGroup.contacts,contact=>{
13.               ListItem(){
14.                 ...
15.               }
16.             })
17.           }
18.         })
19.       }
20.       ...
21.       AlphabetIndexer({arrayValue:this.alphabets,selected:0})
22.         ...
23.         // 获取字母导航中选中字母的索引值，并通过listScroller控制列表滑动到对应索引位置
24.         .onSelect((index:number)=>{
25.           this.listScroller.scrollToIndex(index)
26.         })
27.         ...
28.     }
29.   }

复制代码

至此，当我们在右侧字母导航选择某个字母时就可以控制联系人列表跳转到指定分组了，效果如下：

完备代码

通过上述步骤我们已经完成了整个示例的开发，现提供本示例的完备代码供大家参考：
联系人数据类代码：

1. // ListModel.ets
2. export default class Contact{
3.   name:string;
4.   icon:Resource;
6.   constructor(name:string,icon:Resource) {
7.     this.name = name
8.     this.icon = icon
9.   }
10. }

复制代码

案例主代码：

1. // Contact.ets
2. import Contact from '../model/ListModel'
4. @Entry
5. @Component
6. struct ContactList{
7.   // 联系人列表数据
8.   contactGroups: object[] = [
9.     {
10.       title: 'A',
11.       contacts: [
12.         new Contact('艾薇而', $r('app.media.contact1')),
13.         new Contact('安琪', $r('app.media.contact2')),
14.         new Contact('Angela', $r('app.media.contact3')),
15.       ],
16.     },
17.     {
18.       title: 'B',
19.       contacts: [
20.         new Contact('Bobe', $r('app.media.contact4')),
21.         new Contact('勃勃', $r('app.media.contact5')),
22.       ],
23.     },
24.     {
25.       title: 'D',
26.       contacts: [
27.         new Contact('Donna', $r('app.media.contact6')),
28.         new Contact('朵朵', $r('app.media.contact1')),
29.       ],
30.     },
31.     {
32.       title: 'G',
33.       contacts: [
34.         new Contact('Gavin', $r('app.media.contact4')),
35.         new Contact('果味', $r('app.media.contact1')),
36.       ],
37.     },
38.     {
39.       title: 'K',
40.       contacts: [
41.         new Contact('孔孔', $r('app.media.contact2')),
42.         new Contact('康康', $r('app.media.contact3')),
43.       ],
44.     },
45.     {
46.       title: 'L',
47.       contacts: [
48.         new Contact('Lisa', $r('app.media.contact4')),
49.         new Contact('玲玲', $r('app.media.contact5')),
50.       ],
51.     },
52.     {
53.       title: 'N',
54.       contacts: [
55.         new Contact('牛牛', $r('app.media.contact6')),
56.         new Contact('Natasha', $r('app.media.contact1')),
57.       ],
58.     },
59.     {
60.       title: 'X',
61.       contacts: [
62.         new Contact('小可爱', $r('app.media.contact2')),
63.         new Contact('徐总是', $r('app.media.contact3')),
64.         new Contact('璇璇', $r('app.media.contact3')),
65.         new Contact('欣欣', $r('app.media.contact3')),
66.       ],
67.     },
68.   ]
69.   // 自定义组件groupHeader，作为ListItemGroup的头部组件，即A、B、C等字母列表项
70.   @Builder groupHeader(titleLetter:string){
71.     Text(titleLetter)
72.       .fontSize(20)
73.       .backgroundColor('#fff1f3f5')
74.       .width('100%')
75.       .padding(5)
76.   }
77.   // 创建字母列表作为字母导航的内容
78.   private alphabets:string[] = [ 'A', 'B', 'D', 'G', 'K', 'L', 'N', 'X'];
79.   // 创建动态变量，用于指定字母导航的选择项
80.   @State selectedIndex:number = 0;
81.   // 创建List组件的scroller控制器：listScroller，用于控制联系人列表的滑动位置
82.   private listScroller:Scroller = new Scroller()
84.   build() {
85.     Stack({alignContent:Alignment.End}){
86.       // 将scroller控制器绑定到List组件
87.       List({scroller:this.listScroller}){
88.         // 循环渲染列表内容
89.         ForEach(this.contactGroups,contactGroup=>{
90.           // 采用ListItemGroup对联系人进行分组，将groupHeader作为ListItemGroup的头部组件
91.           ListItemGroup({header:this.groupHeader(contactGroup.title)}){
92.             ForEach(contactGroup.contacts,contact=>{
93.               ListItem(){
94.                 Column(){
95.                   Row(){
96.                     Image(contact.icon)
97.                       .width(35)
98.                       .height(35)
99.                       .margin(10)
100.                     Text(contact.name)
101.                   }
102.                   .width('100%')
103.                   Divider().color('#fff1f3f5')
104.                 }
105.                 .justifyContent(FlexAlign.Start)
106.               }
107.             })
108.           }
109.         })
110.       }
111.       .width('100%')
112.       .height('100%')
113.       .scrollBar(BarState.Auto)
114.       // 获取联系人列表滑动位置的索引，并将索引通过selectedIndex同步给右侧字母导航
115.       .onScrollIndex((firstIndex:number)=>{
116.         this.selectedIndex = firstIndex
117.       })
118.       // 使用AlphabetIndexer组件实现右侧字母导航
119.       AlphabetIndexer({arrayValue:this.alphabets,selected:0})
120.         .margin({right:10})
121.         .itemSize(25)
122.         .font({size:15})
123.         // 指定字母导航的选择项为selectedIndex，完成跟联系人列表的同步
124.         .selected(this.selectedIndex)
125.         // 获取选中字母的索引值，通过listScroller控制列表滑动到对应索引位置
126.         .onSelect((index:number)=>{
127.           this.listScroller.scrollToIndex(index)
128.         })
129.     }
130.   }
131. }

复制代码

参考

创建列表
我这边特意整理了《鸿蒙语法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

《鸿蒙开发学习手册》：

如何快速入门：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企服之家，中国第一个企服评测及商务社交产业平台。