1# AlphabetIndexer
2
3可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12无
13
14
15## 接口
16
17AlphabetIndexer(value: {arrayValue: Array<string>, selected: number})
18
19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名 | 类型 | 必填 | 说明 |
26| -------- | -------- | -------- | -------- |
27| arrayValue | Array<string> | 是 | 字母索引字符串数组，不可设置为空。 |
28| selected   | number              | 是    | 初始选中项索引值，若超出索引值范围，则取默认值0。<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 |
29
30## 属性
31
32[width](ts-universal-attributes-size.md#width)属性设置"auto"时表示自适应宽度，宽度会随索引项最大宽度变化。
33
34[padding](ts-universal-attributes-size.md#padding)属性默认为4vp。
35
36除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
37
38### color
39
40color(value: ResourceColor)
41
42设置文字颜色。
43
44**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
45
46**系统能力：** SystemCapability.ArkUI.ArkUI.Full
47
48**参数：** 
49
50| 参数名 | 类型                                       | 必填 | 说明                                |
51| ------ | ------------------------------------------ | ---- | ----------------------------------- |
52| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 文字颜色。<br/>默认值：0x99182431。 |
53
54### selectedColor
55
56selectedColor(value: ResourceColor)
57
58设置选中项文字颜色。
59
60**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
61
62**系统能力：** SystemCapability.ArkUI.ArkUI.Full
63
64**参数：** 
65
66| 参数名 | 类型                                       | 必填 | 说明                                      |
67| ------ | ------------------------------------------ | ---- | ----------------------------------------- |
68| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 选中项文字颜色。<br/>默认值：0xFF007DFF。 |
69
70### popupColor
71
72popupColor(value: ResourceColor)
73
74设置提示弹窗文字颜色。
75
76**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
77
78**系统能力：** SystemCapability.ArkUI.ArkUI.Full
79
80**参数：** 
81
82| 参数名 | 类型                                       | 必填 | 说明                                        |
83| ------ | ------------------------------------------ | ---- | ------------------------------------------- |
84| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 提示弹窗文字颜色。<br/>默认值：0xFF007DFF。 |
85
86### selectedBackgroundColor
87
88selectedBackgroundColor(value: ResourceColor)
89
90设置选中项背景颜色。
91
92**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
93
94**系统能力：** SystemCapability.ArkUI.ArkUI.Full
95
96**参数：** 
97
98| 参数名 | 类型                                       | 必填 | 说明                                      |
99| ------ | ------------------------------------------ | ---- | ----------------------------------------- |
100| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 选中项背景颜色。<br/>默认值：0x1A007DFF。 |
101
102### popupBackground
103
104popupBackground(value: ResourceColor)
105
106设置提示弹窗背景色。
107
108**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
109
110**系统能力：** SystemCapability.ArkUI.ArkUI.Full
111
112**参数：** 
113
114| 参数名 | 类型                                       | 必填 | 说明                                                         |
115| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ |
116| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 提示弹窗背景色。<br/>弹窗的背景模糊材质效果会对背景色产生影响，可通过设置[popupBackgroundBlurStyle](#popupbackgroundblurstyle12)属性值为NONE关闭背景模糊材质效果。<br/>默认值：<br />API version 11及以前：0xFFFFFFFF。<br />API version 12及以后：#66808080。 |
117
118### usingPopup
119
120usingPopup(value: boolean)
121
122设置是否使用提示弹窗。
123
124**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
125
126**系统能力：** SystemCapability.ArkUI.ArkUI.Full
127
128**参数：** 
129
130| 参数名 | 类型    | 必填 | 说明                                   |
131| ------ | ------- | ---- | -------------------------------------- |
132| value  | boolean | 是   | 是否使用提示弹窗。<br/>默认值：false。 |
133
134### selectedFont
135
136selectedFont(value: Font)
137
138设置选中项文字样式。
139
140**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
141
142**系统能力：** SystemCapability.ArkUI.ArkUI.Full
143
144**参数：** 
145
146| 参数名 | 类型                     | 必填 | 说明                                                         |
147| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
148| value  | [Font](ts-types.md#font) | 是   | 选中项文字样式。<br/>默认值：<br/>API version 11及以前：<br/>{<br/>size:'12.0fp',<br/> style:FontStyle.Normal,<br/> weight:FontWeight.Normal,<br/> family:'HarmonyOS Sans'<br/>}<br/>API version 12及以后：<br/>{<br/>size:'10.0vp',<br/> style:FontStyle.Normal,<br/> weight:FontWeight.Medium,<br/> family:'HarmonyOS Sans'<br/>} |
149
150### popupFont
151
152popupFont(value: Font)
153
154设置提示弹窗字体样式。
155
156**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
157
158**系统能力：** SystemCapability.ArkUI.ArkUI.Full
159
160**参数：** 
161
162| 参数名 | 类型                     | 必填 | 说明                                                         |
163| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
164| value  | [Font](ts-types.md#font) | 是   | 提示弹窗字体样式。<br/>默认值：<br/>{<br/>size:'24.0vp',<br/> style:FontStyle.Normal,<br/> weight:FontWeight.Normal,<br/> family:'HarmonyOS Sans'<br/>} |
165
166### font
167
168font(value: Font)
169
170设置字母索引条默认字体样式。
171
172**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
173
174**系统能力：** SystemCapability.ArkUI.ArkUI.Full
175
176**参数：** 
177
178| 参数名 | 类型                     | 必填 | 说明                                                         |
179| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
180| value  | [Font](ts-types.md#font) | 是   | 字母索引条默认字体样式。<br/>默认值：<br/>API version 11及以前：<br/>{<br/>size:'12.0fp',<br/> style:FontStyle.Normal,<br/> weight:FontWeight.Normal,<br/> family:'HarmonyOS Sans'<br/>}<br/>API version 12及以后：<br/>{<br/>size:'10.0vp',<br/> style:FontStyle.Normal,<br/> weight:FontWeight.Medium,<br/> family:'HarmonyOS Sans'<br/>} |
181
182### itemSize
183
184itemSize(value: string&nbsp;|&nbsp;number)
185
186设置字母索引条字母区域大小。
187
188**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
189
190**系统能力：** SystemCapability.ArkUI.ArkUI.Full
191
192**参数：** 
193
194| 参数名 | 类型                       | 必填 | 说明                                                         |
195| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
196| value  | string&nbsp;\|&nbsp;number | 是   | 字母索引条字母区域大小，字母区域为正方形，即正方形边长。不支持设置为百分比。<br/>默认值：16.0<br/>单位：vp |
197
198### alignStyle
199
200alignStyle(value: IndexerAlign, offset?: Length)
201
202设置字母索引条弹框的对齐样式。
203
204**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
205
206**系统能力：** SystemCapability.ArkUI.ArkUI.Full
207
208**参数：** 
209
210| 参数名               | 类型                                  | 必填 | 说明                                                         |
211| -------------------- | ------------------------------------- | ---- | ------------------------------------------------------------ |
212| value                | [IndexerAlign](#indexeralign枚举说明) | 是   | 字母索引条弹框的对齐样式，支持弹窗显示在索引条右侧和左侧。<br/>默认值: IndexerAlign.END。 |
213| offset<sup>10+</sup> | [Length](ts-types.md#length)          | 否   | 提示弹窗与索引条之间间距，大于等于0为有效值，在不设置或设置为小于0的情况下间距与popupPosition.x相同。与popupPosition同时设置时，水平方向上offset生效，竖直方向上popupPosition.y生效。 |
214
215### selected<sup>8+</sup>
216
217selected(index: number)
218
219设置选中项索引值。
220
221从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。
222
223**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
224
225**系统能力：** SystemCapability.ArkUI.ArkUI.Full
226
227**参数：** 
228
229| 参数名 | 类型   | 必填 | 说明                         |
230| ------ | ------ | ---- | ---------------------------- |
231| index  | number | 是   | 选中项索引值。<br/>默认值：0 |
232
233### popupPosition<sup>8+</sup>
234
235popupPosition(value: Position)
236
237设置弹出窗口相对于索引器条上边框中点的位置。
238
239**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
240
241**系统能力：** SystemCapability.ArkUI.ArkUI.Full
242
243**参数：** 
244
245| 参数名 | 类型                              | 必填 | 说明                                                         |
246| ------ | --------------------------------- | ---- | ------------------------------------------------------------ |
247| value  | [Position](ts-types.md#position) | 是   | 弹出窗口相对于索引器条上边框中点的位置。<br/>默认值：{x:60.0, y:48.0} |
248
249### popupSelectedColor<sup>10+</sup>
250
251popupSelectedColor(value: ResourceColor)
252
253设置提示弹窗非字母部分选中文字色。
254
255**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
256
257**系统能力：** SystemCapability.ArkUI.ArkUI.Full
258
259**参数：** 
260
261| 参数名 | 类型                                       | 必填 | 说明                                                  |
262| ------ | ------------------------------------------ | ---- | ----------------------------------------------------- |
263| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 提示弹窗非字母部分选中文字色。 <br/>默认值：#FF182431 |
264
265### popupUnselectedColor<sup>10+</sup>
266
267popupUnselectedColor(value: ResourceColor)
268
269设置提示弹窗非字母部分未选中文字色。
270
271**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
272
273**系统能力：** SystemCapability.ArkUI.ArkUI.Full
274
275**参数：** 
276
277| 参数名 | 类型                                       | 必填 | 说明                                                    |
278| ------ | ------------------------------------------ | ---- | ------------------------------------------------------- |
279| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 提示弹窗非字母部分未选中文字色。 <br/>默认值：#FF182431 |
280
281### popupItemFont<sup>10+</sup>
282
283popupItemFont(value: Font)
284
285设置提示弹窗非字母部分字体样式。
286
287**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
288
289**系统能力：** SystemCapability.ArkUI.ArkUI.Full
290
291**参数：** 
292
293| 参数名 | 类型                     | 必填 | 说明                                                         |
294| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
295| value  | [Font](ts-types.md#font) | 是   | 提示弹窗非字母部分字体样式。 <br/>默认值：<br/>{<br/>size:24,<br/>weight:FontWeight.Medium<br/>} |
296
297### popupItemBackgroundColor<sup>10+</sup>
298
299popupItemBackgroundColor(value: ResourceColor)
300
301设置提示弹窗非字母部分背景色。 
302
303**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
304
305**系统能力：** SystemCapability.ArkUI.ArkUI.Full
306
307**参数：** 
308
309| 参数名 | 类型                     | 必填 | 说明                                            |
310| ------ | ------------------------ | ---- | ----------------------------------------------- |
311| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 提示弹窗非字母部分背景色。 <br/>默认值：<br />API version 11及以前：#FFFFFFFF。<br />API version 12及以后：#00000000。 |
312
313### autoCollapse<sup>11+</sup>   
314
315autoCollapse(value: boolean)
316
317设置是否使用自适应折叠模式。
318
319如果字符串首字符为“#”，除去首字符。当剩余字符数 $\leq$ 9时，选择全显示模式。当9 < 剩余字符数 $\leq$ 13时，根据索引条高度自适应选择全显示模式或者短折叠模式。当剩余字符数 > 13时，根据索引条高度自适应选择短折叠模式或者长折叠模式。
320
321如果字符串首字符不为“#”。当所有字符数 $\leq$ 9时，选择全显示模式。当9 < 所有字符数 $\leq$ 13时，根据索引条高度自适应选择全显示模式或者短折叠模式。当所有字符数 > 13时，根据索引条高度自适应选择短折叠模式或者长折叠模式。
322
323**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
324
325**系统能力：** SystemCapability.ArkUI.ArkUI.Full
326
327**参数：** 
328
329| 参数名 | 类型    | 必填 | 说明                                       |
330| ------ | ------- | ---- | ------------------------------------------ |
331| value  | boolean | 是   | 是否使用自适应折叠模式。<br/>默认值：<br />API version 12之前：false。<br />API version 12及之后：true。 |
332
333### popupItemBorderRadius<sup>12+</sup>   
334
335popupItemBorderRadius(value: number)
336
337设置提示弹窗索引项背板圆角半径。
338
339**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
340
341**系统能力：** SystemCapability.ArkUI.ArkUI.Full
342
343**参数：** 
344
345| 参数名 | 类型   | 必填 | 说明                                                         |
346| ------ | ------ | ---- | ------------------------------------------------------------ |
347| value  | number | 是   | 设置提示弹窗索引项背板圆角半径。<br/>默认值：24vp。<br/>不支持百分比，小于0时按照0设置。<br/>提示弹窗背板圆角自适应变化（索引项圆角半径+4vp）。 |
348
349### itemBorderRadius<sup>12+</sup>   
350
351itemBorderRadius(value: number)
352
353设置索引项背板圆角半径。
354
355**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
356
357**系统能力：** SystemCapability.ArkUI.ArkUI.Full
358
359**参数：** 
360
361| 参数名 | 类型   | 必填 | 说明                                                         |
362| ------ | ------ | ---- | ------------------------------------------------------------ |
363| value  | number | 是   | 设置索引项背板圆角半径。<br/>默认值：8vp<br/>不支持百分比，小于0时按照0设置。<br/>索引条背板圆角自适应变化（索引项圆角半径+4vp）。 |
364
365### popupBackgroundBlurStyle<sup>12+</sup>   
366
367popupBackgroundBlurStyle(value: BlurStyle)
368
369设置提示弹窗的背景模糊材质。
370
371**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
372
373**系统能力：** SystemCapability.ArkUI.ArkUI.Full
374
375**参数：** 
376
377| 参数名 | 类型                                         | 必填 | 说明                                                         |
378| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ |
379| value  | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 是   | 设置提示弹窗的背景模糊材质。<br/>弹窗的背景模糊材质效果会对背景色[popupBackground](#popupbackground)产生影响，可通过设置属性值为NONE关闭背景模糊材质效果。<br/>默认值：COMPONENT_REGULAR。 |
380
381### popupTitleBackground<sup>12+</sup>   
382
383popupTitleBackground(value: ResourceColor)
384
385设置提示弹窗首个索引项背板颜色。
386
387**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
388
389**系统能力：** SystemCapability.ArkUI.ArkUI.Full
390
391**参数：** 
392
393| 参数名 | 类型                                       | 必填 | 说明                                                         |
394| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ |
395| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 设置提示弹窗首个索引项背板颜色。<br/>默认值：<br/>提示弹窗只有一个索引项：#00FFFFFF。<br/>提示弹窗有多个索引项：#0c182431。 |
396
397### enableHapticFeedback<sup>12+</sup>
398
399enableHapticFeedback(value: boolean)
400
401**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
402
403**系统能力：** SystemCapability.ArkUI.ArkUI.Full
404
405| 参数名         | 类型                                                  | 必填 | 说明                         |
406|-------------|-----------------------------------------------------|----|----------------------------|
407| value | boolean | 否  | 支持触控反馈。<br/>默认值：true。<br/> |
408
409## IndexerAlign枚举说明
410
411**系统能力：** SystemCapability.ArkUI.ArkUI.Full
412
413| 名称 | 说明 |
414| -------- | -------- |
415| Left | 弹框显示在索引条右侧。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。|
416| Right | 弹框显示在索引条左侧。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。|
417| START<sup>12+</sup> | 在LTR场景下，弹框显示在索引条右侧的位置。在RTL场景下，弹框显示在索引条左侧的位置。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。|
418| END<sup>12+</sup> | 在LTR场景下，弹框显示在索引条左侧的位置。在RTL场景下，弹框显示在索引条右侧的位置。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。|
419
420## 事件
421
422除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
423
424### onSelected<sup>(deprecated)</sup>
425
426onSelected(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)
427
428索引条选中回调，返回值为当前选中索引。 
429
430从API Version 8开始废弃，建议使用[onSelect](#onselect8)代替。
431
432**系统能力：** SystemCapability.ArkUI.ArkUI.Full
433
434**参数：** 
435
436| 参数名 | 类型   | 必填 | 说明             |
437| ------ | ------ | ---- | ---------------- |
438| index  | number | 是   | 当前选中的索引。 |
439
440### onSelect<sup>8+</sup>
441
442onSelect(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)
443
444索引条选中回调，返回值为当前选中索引。
445
446**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
447
448**系统能力：** SystemCapability.ArkUI.ArkUI.Full
449
450**参数：** 
451
452| 参数名 | 类型   | 必填 | 说明             |
453| ------ | ------ | ---- | ---------------- |
454| index  | number | 是   | 当前选中的索引。 |
455
456### onRequestPopupData<sup>8+</sup>
457
458onRequestPopupData(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;Array&lt;string&gt;)
459
460选中字母索引后，请求索引提示弹窗显示内容回调。
461
462**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
463
464**系统能力：** SystemCapability.ArkUI.ArkUI.Full
465
466**参数：** 
467
468| 参数名 | 类型   | 必填 | 说明                                                         |
469| ------ | ------ | ---- | ------------------------------------------------------------ |
470| index  | number | 是   | 当前选中的索引 |
471
472**返回值：** 
473
474| 类型   | 说明                                                         |
475| ------ | ------------------------------------------------------------ |
476| Array&lt;string&gt; | 索引对应的字符串数组，此字符串数组在弹窗中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。 |
477
478### onPopupSelect<sup>8+</sup>
479
480onPopupSelect(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)
481
482字母索引提示弹窗字符串列表选中回调。
483
484**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
485
486**系统能力：** SystemCapability.ArkUI.ArkUI.Full
487
488**参数：** 
489
490| 参数名 | 类型   | 必填 | 说明             |
491| ------ | ------ | ---- | ---------------- |
492| index  | number | 是   | 当前选中的索引。 |
493
494
495## 示例
496### 示例1
497
498```ts
499// xxx.ets
500@Entry
501@Component
502struct AlphabetIndexerSample {
503  private arrayA: string[] = ['安']
504  private arrayB: string[] = ['卜', '白', '包', '毕', '丙']
505  private arrayC: string[] = ['曹', '成', '陈', '催']
506  private arrayL: string[] = ['刘', '李', '楼', '梁', '雷', '吕', '柳', '卢']
507  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
508  'H', 'I', 'J', 'K', 'L', 'M', 'N',
509  'O', 'P', 'Q', 'R', 'S', 'T', 'U',
510  'V', 'W', 'X', 'Y', 'Z']
511
512  build() {
513    Stack({ alignContent: Alignment.Start }) {
514      Row() {
515        List({ space: 20, initialIndex: 0 }) {
516          ForEach(this.arrayA, (item: string) => {
517            ListItem() {
518              Text(item)
519                .width('80%')
520                .height('5%')
521                .fontSize(30)
522                .textAlign(TextAlign.Center)
523            }
524          }, (item: string) => item)
525
526          ForEach(this.arrayB, (item: string) => {
527            ListItem() {
528              Text(item)
529                .width('80%')
530                .height('5%')
531                .fontSize(30)
532                .textAlign(TextAlign.Center)
533            }
534          }, (item: string) => item)
535
536          ForEach(this.arrayC, (item: string) => {
537            ListItem() {
538              Text(item)
539                .width('80%')
540                .height('5%')
541                .fontSize(30)
542                .textAlign(TextAlign.Center)
543            }
544          }, (item: string) => item)
545
546          ForEach(this.arrayL, (item: string) => {
547            ListItem() {
548              Text(item)
549                .width('80%')
550                .height('5%')
551                .fontSize(30)
552                .textAlign(TextAlign.Center)
553            }
554          }, (item: string) => item)
555        }
556        .width('50%')
557        .height('100%')
558
559        AlphabetIndexer({ arrayValue: this.value, selected: 0 })
560          .autoCollapse(false)
561          .selectedColor(0xFFFFFF) // 选中项文本颜色
562          .popupColor(0xFFFAF0) // 弹出框文本颜色
563          .selectedBackgroundColor(0xCCCCCC) // 选中项背景颜色
564          .popupBackground(0xD2B48C) // 弹出框背景颜色
565          .usingPopup(true) // 是否显示弹出框
566          .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 选中项字体样式
567          .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
568          .itemSize(28) // 每一项的尺寸大小
569          .alignStyle(IndexerAlign.Left) // 弹出框在索引条右侧弹出
570          .popupItemBorderRadius(24) // 设置提示弹窗索引项背板圆角半径
571          .itemBorderRadius(14) // 设置索引项背板圆角半径
572          .popupBackgroundBlurStyle(BlurStyle.NONE) // 设置提示弹窗的背景模糊材质
573          .popupTitleBackground(0xCCCCCC) // 设置提示弹窗首个索引项背板颜色
574          .popupSelectedColor(0x00FF00)
575          .popupUnselectedColor(0x0000FF)
576          .popupItemFont({ size: 30, style: FontStyle.Normal })
577          .popupItemBackgroundColor(0xCCCCCC)
578          .onSelect((index: number) => {
579            console.info(this.value[index] + ' Selected!')
580          })
581          .onRequestPopupData((index: number) => {
582            if (this.value[index] == 'A') {
583              return this.arrayA // 当选中A时，弹出框里面的提示文本列表显示A对应的列表arrayA，选中B、C、L时也同样
584            } else if (this.value[index] == 'B') {
585              return this.arrayB
586            } else if (this.value[index] == 'C') {
587              return this.arrayC
588            } else if (this.value[index] == 'L') {
589              return this.arrayL
590            } else {
591              return [] // 选中其余子母项时，提示文本列表为空
592            }
593          })
594          .onPopupSelect((index: number) => {
595            console.info('onPopupSelected:' + index)
596          })
597      }
598      .width('100%')
599      .height('100%')
600    }
601  }
602}
603```
604
605![alphabet](figures/alphabet.gif)
606
607### 示例2
608```ts
609// xxx.ets
610@Entry
611@Component
612struct AlphabetIndexerSample {
613  private arrayA: string[] = ['安']
614  private arrayB: string[] = ['卜', '白', '包', '毕', '丙']
615  private arrayC: string[] = ['曹', '成', '陈', '催']
616  private arrayJ: string[] = ['嘉', '贾']
617  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
618    'H', 'I', 'J', 'K', 'L', 'M', 'N',
619    'O', 'P', 'Q', 'R', 'S', 'T', 'U',
620    'V', 'W', 'X', 'Y', 'Z']
621  @State isNeedAutoCollapse: boolean = false;
622  @State indexerHeight: string = '75%';
623
624  build() {
625    Stack({ alignContent: Alignment.Start }) {
626      Row() {
627        List({ space: 20, initialIndex: 0 }) {
628          ForEach(this.arrayA, (item: string) => {
629            ListItem() {
630              Text(item)
631                .width('80%')
632                .height('5%')
633                .fontSize(30)
634                .textAlign(TextAlign.Center)
635            }
636          }, (item: string) => item)
637
638          ForEach(this.arrayB, (item: string) => {
639            ListItem() {
640              Text(item)
641                .width('80%')
642                .height('5%')
643                .fontSize(30)
644                .textAlign(TextAlign.Center)
645            }
646          }, (item: string) => item)
647
648          ForEach(this.arrayC, (item: string) => {
649            ListItem() {
650              Text(item)
651                .width('80%')
652                .height('5%')
653                .fontSize(30)
654                .textAlign(TextAlign.Center)
655            }
656          }, (item: string) => item)
657
658          ForEach(this.arrayJ, (item: string) => {
659            ListItem() {
660              Text(item)
661                .width('80%')
662                .height('5%')
663                .fontSize(30)
664                .textAlign(TextAlign.Center)
665            }
666          }, (item: string) => item)
667        }
668        .width('50%')
669        .height('100%')
670
671        Column() {
672          Column() {
673            AlphabetIndexer({ arrayValue: this.value, selected: 0 })
674              .autoCollapse(this.isNeedAutoCollapse)
675              .height(this.indexerHeight)
676              .selectedColor(0xFFFFFF)// 选中项文本颜色
677              .popupColor(0xFFFAF0)// 弹出框文本颜色
678              .selectedBackgroundColor(0xCCCCCC)// 选中项背景颜色
679              .popupBackground(0xD2B48C)// 弹出框背景颜色
680              .usingPopup(true)// 是否显示弹出框
681              .selectedFont({ size: 16, weight: FontWeight.Bolder })// 选中项字体样式
682              .popupFont({ size: 30, weight: FontWeight.Bolder })// 弹出框内容的字体样式
683              .itemSize(28)// 每一项的尺寸大小
684              .alignStyle(IndexerAlign.Right)// 弹出框在索引条左侧弹出
685              .popupTitleBackground("#D2B48C") // 弹出框首个索引项背板颜色
686              .popupSelectedColor(0x00FF00)
687              .popupUnselectedColor(0x0000FF)
688              .popupItemFont({ size: 30, style: FontStyle.Normal })
689              .popupItemBackgroundColor(0xCCCCCC)
690              .onSelect((index: number) => {
691                console.info(this.value[index] + ' Selected!');
692              })
693              .onRequestPopupData((index: number) => {
694                if (this.value[index] == 'A') {
695                  return this.arrayA;
696                } else if (this.value[index] == 'B') {
697                  return this.arrayB;
698                } else if (this.value[index] == 'C') {
699                  return this.arrayC;
700                } else if (this.value[index] == 'J') {
701                  return this.arrayJ;
702                } else {
703                  return [];
704                }
705              })
706              .onPopupSelect((index: number) => {
707                console.info('onPopupSelected:' + index);
708              })
709          }
710          .height('80%')
711          .justifyContent(FlexAlign.Center)
712
713          Column() {
714            Button('切换成折叠模式')
715              .margin('5vp')
716              .onClick(() => {
717                this.isNeedAutoCollapse = true;
718              })
719            Button('切换索引条高度到30%')
720              .margin('5vp')
721              .onClick(() => {
722                this.indexerHeight = '30%';
723              })
724            Button('切换索引条高度到70%')
725              .margin('5vp')
726              .onClick(() => {
727                this.indexerHeight = '70%';
728              })
729          }.height('20%')
730        }
731        .width('50%')
732        .justifyContent(FlexAlign.Center)
733      }
734      .width('100%')
735      .height('100%')
736    }
737  }
738}
739```
740
741![alphabetIndexerAutoCollapseSample](figures/alphabetIndexerAutoCollapseSample.gif)
742
743### 示例3
744
745```ts
746// 该示例实现了自定义设置提示弹窗的背景模糊材质
747@Entry
748@Component
749struct AlphabetIndexerSample {
750  private arrayA: string[] = ['安']
751  private arrayB: string[] = ['卜', '白', '包', '毕', '丙']
752  private arrayC: string[] = ['曹', '成', '陈', '催']
753  private arrayL: string[] = ['刘', '李', '楼', '梁', '雷', '吕', '柳', '卢']
754  private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
755    'H', 'I', 'J', 'K', 'L', 'M', 'N',
756    'O', 'P', 'Q', 'R', 'S', 'T', 'U',
757    'V', 'W', 'X', 'Y', 'Z']
758  @State customBlurStyle: BlurStyle = BlurStyle.NONE;
759
760  build() {
761    Stack({ alignContent: Alignment.Start }) {
762      Row() {
763        List({ space: 20, initialIndex: 0 }) {
764          ForEach(this.arrayA, (item: string) => {
765            ListItem() {
766              Text(item)
767                .width('80%')
768                .height('5%')
769                .fontSize(30)
770                .textAlign(TextAlign.Center)
771            }
772          }, (item: string) => item)
773
774          ForEach(this.arrayB, (item: string) => {
775            ListItem() {
776              Text(item)
777                .width('80%')
778                .height('5%')
779                .fontSize(30)
780                .textAlign(TextAlign.Center)
781            }
782          }, (item: string) => item)
783
784          ForEach(this.arrayC, (item: string) => {
785            ListItem() {
786              Text(item)
787                .width('80%')
788                .height('5%')
789                .fontSize(30)
790                .textAlign(TextAlign.Center)
791            }
792          }, (item: string) => item)
793
794          ForEach(this.arrayL, (item: string) => {
795            ListItem() {
796              Text(item)
797                .width('80%')
798                .height('5%')
799                .fontSize(30)
800                .textAlign(TextAlign.Center)
801            }
802          }, (item: string) => item)
803        }
804        .width('30%')
805        .height('100%')
806        Column(){
807          Column() {
808            Text('切换模糊材质: ')
809              .fontSize(24)
810              .fontColor(0xcccccc)
811              .width('100%')
812            Button('COMPONENT_REGULAR')
813              .margin('5vp')
814              .width(200)
815              .onClick(() => {
816                this.customBlurStyle = BlurStyle.COMPONENT_REGULAR;
817              })
818            Button('BACKGROUND_THIN')
819              .margin('5vp')
820              .width(200)
821              .onClick(() => {
822                this.customBlurStyle = BlurStyle.BACKGROUND_THIN;
823              })
824          }.height('20%')
825
826          Column(){
827            AlphabetIndexer({ arrayValue: this.value, selected: 0 })
828              .usingPopup(true) // 是否显示弹出框
829              .alignStyle(IndexerAlign.Left) // 弹出框在索引条右侧弹出
830              .popupItemBorderRadius(24) // 设置提示弹窗索引项背板圆角半径
831              .itemBorderRadius(14) // 设置索引项背板圆角半径
832              .popupBackgroundBlurStyle(this.customBlurStyle) // 设置提示弹窗的背景模糊材质
833              .popupTitleBackground(0xCCCCCC) // 设置提示弹窗首个索引项背板颜色
834              .onSelect((index: number) => {
835                console.info(this.value[index] + ' Selected!')
836              })
837              .onRequestPopupData((index: number) => {
838                if (this.value[index] == 'A') {
839                  return this.arrayA // 当选中A时，弹出框里面的提示文本列表显示A对应的列表arrayA，选中B、C、L时也同样
840                } else if (this.value[index] == 'B') {
841                  return this.arrayB
842                } else if (this.value[index] == 'C') {
843                  return this.arrayC
844                } else if (this.value[index] == 'L') {
845                  return this.arrayL
846                } else {
847                  return [] // 选中其余子母项时，提示文本列表为空
848                }
849              })
850              .onPopupSelect((index: number) => {
851                console.info('onPopupSelected:' + index)
852              })
853          }
854          .height('80%')
855        }
856        .width('70%')
857      }
858      .width('100%')
859      .height('100%')
860      .backgroundImage($r("app.media.image"))
861    }
862  }
863}
864```
865
866![alphabetIndexerBlurStyleSample](figures/alphabetIndexerBlurStyleSample.gif)
867