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