【鸿蒙实战开发】模态转场、List 组件、AlphabetIndexer

一、模态转场

起首，先来讲一讲什么是模态转场吧，简朴来讲就是我们在手机上面看到的分享图标点击以后出来的一个半屏的分享界面，这个过程就叫做模态转场。
概念：就是从页面内弹出一个半屏大概全屏的一个弹框。

1.1、半模态转场

作用：就是给一个半屏的模态转场。

语法结构：
.bindSheet(iSshow/是否表现半模态页面，builder/配置半模态页面内容)
1.2、表现状态双向绑定

在非双向绑定环境下，以拖拽方式关闭半模态页面不会改变isShow参数的值。
为了使isShow参数值与半模态界面的状态同步，发起使用$$双向绑定isShow参数。

代码演示：

2. @Entry
3. @Component
4. struct zy {
5. @State isshow: boolean = false
6. @Builder
7. binBuilder() {
8. Column() {
9. Text('已打开')
10. .fontSize(50)
11. .fontColor(Color.Pink)
12. }
13. }
15. build() {
16. Column() {
17. Text('打开半模态框')
18. .fontSize(40)
19. //点击后打开半模态框
20. .onClick(() => {
21. this.isshow = true
22. })
23. .bindSheet($this.isshow, //双向绑定半模态页面
24. this.binBuilder()//模态框内的内容
25. )
26. }
27. .width('100%')
28. .height('100%')
29. }
30. }

复制代码

图片演示：

1.3、 可选属性sheetOptions

通过第三个可选参数SheetOptions，可以对半模态的内容举行调整
常用属性：

代码演示：

2. @Entry
3. @Component
4. struct zy {
5. @State isshow: boolean = false
7. @Builder
8. binBuilder() {
9. Column() {
10. Text('已打开')
11. .fontSize(50)
12. .fontColor(Color.Pink)
13. //自定义的关闭模态框图标
14. Text('x')
15. .border({ width: 1, color: Color.Green })
16. .height(30)
17. .fontColor(Color.Gray)
18. .fontSize(20)
19. .position({ x: 210, y: 6 })
20. .width(30)
21. .textAlign(TextAlign.Center)
22. .borderRadius(15)
23. .onClick(() => {
24. this.isshow = false
25. })
26. }
27. }
28. build() {
29. Column() {
30. Text('打开半模态框')
31. .fontSize(40)//点击后打开半模态框
32. .onClick(() => {
33. this.isshow = true
34. })
35. .bindSheet($this.isshow, //双向绑定半模态页面
36. this.binBuilder(), //模态框内的内容
37. {
38. height: 400, //模态框高度
39. showClose: false, //关闭显示关闭图标，默认打开
40. // detents:[100,200],//半模态页面的切换高度档位。
41. dragBar: false//关闭控制条，默认显示
42. })
43. }
44. .width('100%')
45. .height('100%')
46. }
47. }

复制代码

效果图：

案例-分享弹框

代码演示：

2. @Entry
3. @Component
4. struct zy {
5. @State isshow: boolean = false
7. //半模态框里面的内容
8. @Builder
9. bindBuilder() {
11. Column({ space: 20 }) {
12. Row() {
13. Text('分享给好友')
14. .fontColor('rgba(0,0,0,0.5)')
15. .fontWeight(800)
16. .fontSize(23)
17. .textAlign(TextAlign.Center)
18. .layoutWeight(1)
19. Image($r('app.media.ic_public_cancel'))
20. .width(30)
21. .onClick(() => {
22. this.isshow = false
23. })
24. }
26. .padding(10)
27. .width('100%')
28. .justifyContent(FlexAlign.SpaceBetween)
30. Row() {
31. Column({ space: 5 }) {
32. Image($r('app.media.ic_share_wechat'))
33. .width(50)
34. Text('微信')
35. }
37. Column({ space: 5 }) {
38. Image($r('app.media.ic_share_pyq'))
39. .width(50)
40. Text('朋友圈')
41. }
43. Column({ space: 5 }) {
44. Image($r('app.media.ic_share_sina'))
45. .width(50)
46. Text('微博')
47. }
49. Column({ space: 5 }) {
50. Image($r('app.media.ic_share_url'))
51. .width(50)
52. Text('复制链接')
53. }
54. }
55. .width('100%')
56. .justifyContent(FlexAlign.SpaceAround)
57. }
58. .margin({ bottom: 50 })
59. }
61. build() {
62. Column() {
63. Button('转发')
64. .onClick(() => {
65. this.isshow = true
66. })
67. .bindSheet($this.isshow, this.bindBuilder(),
68. {
69. showClose: false, //关闭显示关闭图标
70. height: SheetSize.FIT_CONTENT//高度自适应
71. }
72. )
73. }
74. .width('100%')
75. .height('100%')
76. }
77. }

复制代码

效果图：

1.4、全屏模态

概念：顾名思义就是全屏的模态页面。

二、List组件

接着我们来讲一下今天List组件的小扩展，有些时候我们必要用List组件做一些相对有点复杂的效果，比如通讯录界面效果，那就必要ListItemGroup 分组容器和一些List组件的属性及事件来完成了。
2.1、分组展示

焦点用法：

• List作为顶级容器
  
• ListItemGroup 作为分组容器
  
• ListItem作为 List 大概ListItemGroup的子组件
  

ListItemGroup组件参数，以对象形式传入

ListItemGroup(参数){}.属性()
参数：

属性：和List的属性是一样的

代码演示：

2. @Entry
3. @Component
4. struct ListItemGroup_01 {
5. @Builder
6. headerBuilder() {
7. Text('我是头部')
8. }
10. @Builder
11. footerBuilder() {
12. Text('我是底部')
13. }
15. build() {
16. List() {
17. ListItemGroup({
18. header: this.headerBuilder(),
19. footer: this.footerBuilder(),
20. space: 20
21. }) {
22. ListItem() {
23. Text('我是内容')
24. .backgroundColor(Color.Orange)
25. }
27. ListItem() {
28. Text('我是内容')
29. .backgroundColor(Color.Orange)
30. }
31. }
32. .divider({ strokeWidth: 1, color: Color.Orange,startMargin:40 })
33. }
34. }
35. }

复制代码

效果图：

小案例

代码演示：

1. @Entry
2. @Component
3. struct ContactsList {
4. build() {
5. List() {
6. //头部参数A
7. ListItemGroup({ header: this.itemHead('A'), space: 20 }) {
8. // 循环渲染分组A的ListItem
9. this.contactBuilder('艾佳')
10. this.contactBuilder('安安')
11. this.contactBuilder('艾米丽')
12. }
13. //分割线
14. .divider({
15. startMargin: 60,
16. strokeWidth: 1,
17. color: '#ccc'
18. })
19. //头部参数B
20. ListItemGroup({ header: this.itemHead('B'), space: 20 }) {
21. // 循环渲染分组B的ListItem
22. this.contactBuilder('白客')
23. this.contactBuilder('白夜')
24. this.contactBuilder('博明')
25. }
26. .divider({
27. startMargin: 60,
28. strokeWidth: 1,
29. color: '#ccc'
30. })
31. }
33. }
35. @Builder
36. itemHead(text: string) {
37. // 列表分组的头部组件，对应联系人分组A、B等位置的组件
38. Text(text)
39. .fontSize(20)
40. .backgroundColor('#fff1f3f5')
41. .width('100%')
42. .padding(5)
43. }
45. @Builder
46. contactBuilder(name: string) {
47. //列表分组的内容组件
48. ListItem() {
49. Row({ space: 10 }) {
50. Image($r('app.media.ic_public_lianxiren'))
51. .width(40)
52. .fillColor('#e4b99a')
53. Text(name)
54. }
55. }
56. }
57. }

复制代码

效果图片：

2.2、粘性标题

作用：
配合ListItemGroup组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。

代码演示：

1. List(){
3. }
4. // .sticky(StickyStyle.None) // 不吸附 默认值
5. // .sticky(StickyStyle.Header) // 头部吸附
6. // .sticky(StickyStyle. Footer) //  底部吸附，如果有的话

复制代码

2.3、控制滚动

作用：如果列表很长，必要快速滚动到列表底部或返回列表顶部，就可以使用代码来控制滚动。
关键步骤：

• 创建控制器(ListScroller)对象
  
• 设置给 List 组件
  
• 调用控制器对象的方法，实现滚动
  

代码演示：

2. // 1\. 创建控制器(ListScroller)对象
3. listScroller: ListScroller = new ListScroller()
4. // 2\. 设置给 List 组件
5. List({ space: 20, scroller: this.listScroller }) {
6. // ...
7. }
9. Button() {
10. // ...
11. }
12. .onClick(() => {
13. // 3\. 调用控制器对象的方法，实现滚动
14. this.listScroller.scrollToIndex(0)
15. })

复制代码

参数：

2.4、事件

案例（通讯录）

需求1：数据渲染
数据2：设置随机头像颜色
需求3：头部粘性标题
需求4：通过控制滚动点击通讯录回到顶部
代码演示：

1. interface ContactContent {
2. initial: string
3. nameList: string[]
4. }
6. @Entry
7. @Component
8. struct ContactsList {
9. contacts: ContactContent[] = [
10. { initial: 'A', nameList: ['阿猫', '阿狗', '阿虎', '阿龙', '阿鹰', '阿狼', '阿豹', '阿狮', '阿象', '阿鲸'] },
11. { initial: 'B', nameList: ['白兔', '白鸽', '白鹤', '白鹭', '白狐', '白狼', '白虎', '白鹿', '白蛇', '白马'] },
12. { initial: 'C', nameList: ['春花', '春风', '春雨', '春草', '春柳', '春燕', '春莺', '春蝶', '春蓝', '春绿'] },
13. { initial: 'D', nameList: ['冬雪', '冬梅', '冬松', '冬竹', '冬云', '冬霜', '冬月', '冬夜', '冬青', '冬红'] },
14. { initial: 'E', nameList: ['饿狼', '饿虎', '饿鹰', '饿豹', '饿熊', '饿蛇', '饿鱼', '饿虾', '饿蟹', '饿蚌'] },
15. { initial: 'F', nameList: ['飞鸟', '飞鱼', '飞虫', '飞蜂', '飞蝶', '飞蛾', '飞蝉', '飞蝗', '飞鼠', '飞猫'] },
16. { initial: 'G', nameList: ['孤狼', '孤鹰', '孤虎', '孤豹', '孤蛇', '孤鲨', '孤鲸', '孤鹿', '孤雁', '孤鸿'] },
17. { initial: 'H', nameList: ['海鸥', '海龟', '海豚', '海星', '海马', '海葵', '海参', '海胆', '海螺', '海贝'] },
18. { initial: 'I', nameList: ['火焰', '火球', '火箭', '火山', '火车', '火柴', '火把', '火鸟'] },
19. { initial: 'J', nameList: ['金鱼', '金狮', '金刚', '金鹿', '金蛇', '金鹰', '金豹', '金虎', '金狐', '金猫'] },
20. { initial: 'K', nameList: ['孔雀', '恐龙', '开心', '开怀', '开朗', '开拓', '开口', '开花', '开眼', '开天'] },
21. { initial: 'L', nameList: ['老虎', '老鹰', '老鼠', '老狼', '老狗', '老猫', '老熊', '老鹿', '老龟', '老蛇'] },
22. { initial: 'M', nameList: ['玫瑰', '牡丹', '梅花', '茉莉', '木兰', '棉花', '蜜蜂', '蚂蚁', '马蜂', '蟒蛇'] },
23. { initial: 'N', nameList: ['南山', '南极', '南海', '南京', '南阳', '南风', '南瓜', '南竹', '南花', '南鸟'] },
24. {
25. initial: 'O',
26. nameList: ['熊猫', '欧鹭', '欧洲', '欧阳', '欧文', '欧若拉', '欧米茄', '欧罗巴', '欧菲莉亚', '欧瑞斯']
27. },
28. { initial: 'P', nameList: ['苹果', '葡萄', '琵琶', '枇杷', '菩提', '瓢虫', '瓢泼', '飘零', '飘渺', '飘飘然'] },
29. { initial: 'Q', nameList: ['七喜', '强风', '奇迹', '乾坤', '奇才', '晴天', '青竹', '秋水', '轻舞', '清泉'] },
30. { initial: 'R', nameList: ['瑞雪', '瑞兽', '瑞光', '瑞云', '瑞彩', '瑞气', '瑞香', '瑞草', '瑞莲', '瑞竹'] },
31. { initial: 'S', nameList: ['三羊', '三狗', '三猫', '三鱼', '三角', '三鹿', '三鹰', '三蛇', '三狐', '三豹'] },
32. { initial: 'T', nameList: ['太阳', '天空', '田园', '太极', '太湖', '天鹅', '太空', '天使', '坦克', '甜橙'] },
33. { initial: 'U', nameList: ['乌鸦', '乌鹊', '乌鱼', '乌龟', '乌云', '乌梅', '乌木', '乌金', '乌黑', '乌青'] },
34. { initial: 'V', nameList: ['五虎', '五狼', '五鹰', '五豹', '五熊', '五蛇', '五鲨', '五鲸', '五鹿', '五马'] },
35. { initial: 'W', nameList: ['悟空', '微笑', '温暖', '无畏', '温柔', '舞蹈', '问心', '悟道', '未来', '文学'] },
36. { initial: 'X', nameList: ['西风', '西洋', '西子', '西施', '西岳', '西湖', '西柚', '西竹', '西花', '西鸟'] },
37. { initial: 'Y', nameList: ['夜猫', '夜鹰', '夜莺', '夜空', '夜色', '夜月', '夜影', '夜翼', '夜狐', '夜狼'] },
38. { initial: 'Z', nameList: ['珍珠', '紫薇', '紫霞', '紫竹', '紫云', '紫燕', '紫鸢', '紫藤', '紫荆', '紫罗兰'] },
39. ]
40. //创建控制器(ListScroller)对象
41. ls: ListScroller = new ListScroller()
42. //随机颜色
43. getRandomColor(): ResourceColor {
44. const r = Math.floor(Math.random() * 256);
45. const g = Math.floor(Math.random() * 256);
46. const b = Math.floor(Math.random() * 256);
47. return `rgba(${r}, ${g}, ${b}, 0.5)`;
48. }
50. build() {
51. Column() {
52. Stack({ alignContent: Alignment.End }) {
53. Text('通讯录')
54. .width('100%')
55. .textAlign(TextAlign.Center)
56. .fontSize(20)
57. //调用控制器对象的方法，实现滚动
58. .onClick(() => {
59. this.ls.scrollToIndex(0, true, ScrollAlign.START)
60. })
61. Image($r('app.media.ic_public_add'))
62. .width(20)
64. }
65. .width('100%')
66. .padding(15)
67. .backgroundColor('#fff1f3f5')
69. //绑定List 组件
70. List({ scroller: this.ls }) {
71. // 顶部
72. ListItem() {
73. Row() {
74. Image($r('app.media.ic_public_search'))
75. .width(20)
76. .fillColor(Color.Gray)
77. Text('搜索')
78. .fontColor(Color.Gray)
79. }
80. .backgroundColor(Color.White)
81. .width('100%')
82. .height(40)
83. .borderRadius(5)
84. .justifyContent(FlexAlign.Center)
85. }
86. .padding(10)
87. .width('100%')
88. .backgroundColor('#fff1f3f5')
90. //循环渲染对象数组
91. ForEach(this.contacts, (item: ContactContent) => {
92. ListItemGroup({ header: this.itemHead(item.initial), space: 10 }) {
93. // 循环渲染分组A的ListItem
94. ForEach(item.nameList, (name: string) => {
95. this.contactBuilder(name, this.getRandomColor())
96. })
97. }
98. .divider({
99. startMargin: 60,
100. strokeWidth: 1,
101. color: '#ccc'
102. })
103. })
104. }
105. .sticky(StickyStyle.Header)//头部粘性标题
107. }
109. }
111. @Builder
112. itemHead(text: string) {
113. // 列表分组的头部组件，对应联系人分组A、B等位置的组件
114. Text(text)
115. .fontSize(20)
116. .backgroundColor('#fff1f3f5')
117. .width('100%')
118. .padding(5)
119. }
121. @Builder
122. contactBuilder(name: string, color: ResourceColor) {
123. ListItem() {
124. Row({ space: 10 }) {
125. Image($r('app.media.ic_public_lianxiren'))
126. .width(40)
127. .fillColor(color)
128. Text(name)
129. }
130. }
131. }
132. }

复制代码

效果图：

三、AlphabetIndexer组件

作用：通过 AlphabetIndexer 组件可以与容器组件结合，实现导航联动，以及快速定位的效果。
3.1、焦点用法

AlphabetIndexer不是容器组件，属于功能类的组件，使用时，必要设置如下 2 个参数。

通过双向绑定变量。可以实现修改变量值，同步更新选中的索引
代码演示：

2. @Entry
3. @Component
4. struct ContactsList {
5. @State selectedIndex:number = 0
6. alphabets: string[] = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
7. 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
9. build() {
10. Stack({ alignContent: Alignment.End }) {
11. // 字母表索引组件
12. AlphabetIndexer({ arrayValue: this.alphabets, selected: $this.selectedIndex })
14. }
15. .width('100%')
16. .height('100%')
17. }
18. }

复制代码

3.2、外观设置

设置文字外观

如果默认的颜色效果无法满意要求，可以通过如下属性来举行设置。

代码演示：

1. .color(Color.Orange)// 文字颜色
2. .selectedColor(Color.Green)// 选中文字颜色
3. .selectedBackgroundColor(Color.Black) // 选中背景颜色

复制代码

弹窗提示

如果默认的文字高亮效果无法满意要求，还可以通过弹框来表现，对应属性如下：

2. .usingPopup(true)//使用弹窗
3. .popupColor(Color.Orange)// 弹窗文字颜色
4. .popupTitleBackground(Color.Pink)  // 弹窗背景颜色

复制代码

3.3、事件

代码演示：

1. @Entry
2. @Component
3. struct ContactsList {
4. @State selectedIndex: number = 0;
5. alphabets: string[] = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
6. 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
8. build() {
9. Stack({ alignContent: Alignment.End }) {
10. Text(this.selectedIndex + '')
11. .width('100%')
12. // 字母表索引组件
13. AlphabetIndexer({ arrayValue: this.alphabets, selected: this.selectedIndex })
14. .usingPopup(true)
15. .onSelect((index: number) => {
16. this.selectedIndex = index
17. })
18. }
19. .width('100%')
20. .height('100%')
21. }
22. }

复制代码

综合案例（通讯录）

结合AlphabetIndexer组件，让字母索引与通讯录索引联动
代码演示：

1. interface ContactContent {
2. initial: string
3. nameList: string[]
4. }
6. @Entry
7. @Component
8. struct ContactsList {
9. contacts: ContactContent[] = [
10. { initial: 'A', nameList: ['阿猫', '阿狗', '阿虎', '阿龙', '阿鹰', '阿狼', '阿豹', '阿狮', '阿象', '阿鲸'] },
11. { initial: 'B', nameList: ['白兔', '白鸽', '白鹤', '白鹭', '白狐', '白狼', '白虎', '白鹿', '白蛇', '白马'] },
12. { initial: 'C', nameList: ['春花', '春风', '春雨', '春草', '春柳', '春燕', '春莺', '春蝶', '春蓝', '春绿'] },
13. { initial: 'D', nameList: ['冬雪', '冬梅', '冬松', '冬竹', '冬云', '冬霜', '冬月', '冬夜', '冬青', '冬红'] },
14. { initial: 'E', nameList: ['饿狼', '饿虎', '饿鹰', '饿豹', '饿熊', '饿蛇', '饿鱼', '饿虾', '饿蟹', '饿蚌'] },
15. { initial: 'F', nameList: ['飞鸟', '飞鱼', '飞虫', '飞蜂', '飞蝶', '飞蛾', '飞蝉', '飞蝗', '飞鼠', '飞猫'] },
16. { initial: 'G', nameList: ['孤狼', '孤鹰', '孤虎', '孤豹', '孤蛇', '孤鲨', '孤鲸', '孤鹿', '孤雁', '孤鸿'] },
17. { initial: 'H', nameList: ['海鸥', '海龟', '海豚', '海星', '海马', '海葵', '海参', '海胆', '海螺', '海贝'] },
18. { initial: 'I', nameList: ['火焰', '火球', '火箭', '火山', '火车', '火柴', '火把', '火鸟'] },
19. { initial: 'J', nameList: ['金鱼', '金狮', '金刚', '金鹿', '金蛇', '金鹰', '金豹', '金虎', '金狐', '金猫'] },
20. { initial: 'K', nameList: ['孔雀', '恐龙', '开心', '开怀', '开朗', '开拓', '开口', '开花', '开眼', '开天'] },
21. { initial: 'L', nameList: ['老虎', '老鹰', '老鼠', '老狼', '老狗', '老猫', '老熊', '老鹿', '老龟', '老蛇'] },
22. { initial: 'M', nameList: ['玫瑰', '牡丹', '梅花', '茉莉', '木兰', '棉花', '蜜蜂', '蚂蚁', '马蜂', '蟒蛇'] },
23. { initial: 'N', nameList: ['南山', '南极', '南海', '南京', '南阳', '南风', '南瓜', '南竹', '南花', '南鸟'] },
24. {
25. initial: 'O',
26. nameList: ['熊猫', '欧鹭', '欧洲', '欧阳', '欧文', '欧若拉', '欧米茄', '欧罗巴', '欧菲莉亚', '欧瑞斯']
27. },
28. { initial: 'P', nameList: ['苹果', '葡萄', '琵琶', '枇杷', '菩提', '瓢虫', '瓢泼', '飘零', '飘渺', '飘飘然'] },
29. { initial: 'Q', nameList: ['七喜', '强风', '奇迹', '乾坤', '奇才', '晴天', '青竹', '秋水', '轻舞', '清泉'] },
30. { initial: 'R', nameList: ['瑞雪', '瑞兽', '瑞光', '瑞云', '瑞彩', '瑞气', '瑞香', '瑞草', '瑞莲', '瑞竹'] },
31. { initial: 'S', nameList: ['三羊', '三狗', '三猫', '三鱼', '三角', '三鹿', '三鹰', '三蛇', '三狐', '三豹'] },
32. { initial: 'T', nameList: ['太阳', '天空', '田园', '太极', '太湖', '天鹅', '太空', '天使', '坦克', '甜橙'] },
33. { initial: 'U', nameList: ['乌鸦', '乌鹊', '乌鱼', '乌龟', '乌云', '乌梅', '乌木', '乌金', '乌黑', '乌青'] },
34. { initial: 'V', nameList: ['五虎', '五狼', '五鹰', '五豹', '五熊', '五蛇', '五鲨', '五鲸', '五鹿', '五马'] },
35. { initial: 'W', nameList: ['悟空', '微笑', '温暖', '无畏', '温柔', '舞蹈', '问心', '悟道', '未来', '文学'] },
36. { initial: 'X', nameList: ['西风', '西洋', '西子', '西施', '西岳', '西湖', '西柚', '西竹', '西花', '西鸟'] },
37. { initial: 'Y', nameList: ['夜猫', '夜鹰', '夜莺', '夜空', '夜色', '夜月', '夜影', '夜翼', '夜狐', '夜狼'] },
38. { initial: 'Z', nameList: ['珍珠', '紫薇', '紫霞', '紫竹', '紫云', '紫燕', '紫鸢', '紫藤', '紫荆', '紫罗兰'] },
39. ]
41. //取0-255的随机数来通过rgba做随机颜色
42. colors() {
43. let r = Math.floor(Math.random() * 256)
44. let g = Math.floor(Math.random() * 256)
45. let b = Math.floor(Math.random() * 256)
46. return `rgba(${r},${g},${b},0.5)`
47. }
49. i: ListScroller = new ListScroller()
50. @State index1: number = 0
51. alphabets: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
52. 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
54. build() {
55. Column() {
56. Stack({ alignContent: Alignment.End }) {
57. Text('通讯录')
58. .width('100%')
59. .textAlign(TextAlign.Center)
60. .fontSize(20)
61. Image($r('app.media.ic_public_add'))
62. .width(20)
63. }
64. .width('100%')
65. .padding(15)
66. .backgroundColor('#fff1f3f5')
68. // 顶部
69. Row() {
70. Image($r('app.media.ic_public_search'))
71. .width(20)
72. .fillColor(Color.Gray)
73. Text('搜索')
74. .fontColor(Color.Gray)
75. }
76. .backgroundColor(Color.White)
77. .width('100%')
78. .height(40)
79. .borderRadius(5)
80. .justifyContent(FlexAlign.Center)
82. Stack({ alignContent: Alignment.End }) {
83. List({ scroller: this.i }) {
85. ForEach(this.contacts, (item: ContactContent) => {
86. ListItemGroup({ header: this.itemHead(item.initial), space: 10 }) {
87. // 循环渲染分组A的ListItem
88. ForEach(item.nameList, (name: string) => {
89. this.contactBuilder(name, this.colors())
90. })
91. }
92. .divider({
93. startMargin: 60,
94. strokeWidth: 1,
95. color: '#ccc'
96. })
97. })
99. }
100. .sticky(StickyStyle.Header)
101. .onScrollIndex((index: number) => {
102. console.log(index.toString())
103. this.index1 = index
104. })
105. .scrollBar(BarState.Off)
107. AlphabetIndexer({ arrayValue: this.alphabets, selected: this.index1 })
108. .onSelect((index: number) => {
109. this.i.scrollToIndex(index)
110. })
111. .usingPopup(true)
112. .itemSize(22)
113. .popupColor(Color.Pink)
114. .popupPosition({ x: 20, y: 0 })
115. }
117. }
119. }
121. @Builder
122. itemHead(text: string) {
123. // 列表分组的头部组件，对应联系人分组A、B等位置的组件
124. Text(text)
125. .fontSize(20)
126. .backgroundColor('#fff1f3f5')
127. .width('100%')
128. .padding(5)
129. }
131. @Builder
132. contactBuilder(name: string, color: ResourceColor) {
133. ListItem() {
134. Row({ space: 10 }) {
135. Image($r('app.media.ic_public_lianxiren'))
136. .width(40)
137. .fillColor(color)
138. Text(name)
139. }
140. }
141. }
142. }

复制代码

写在最后

●如果你觉得这篇内容对你还蛮有资助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以等待后续文章ing