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