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