1# ArcAlphabetIndexer 2 3弧形索引条是一种弧形的、可按字母顺序排序进行快速定位的组件，可以与容器组件联动，按逻辑结构快速定位至容器显示区域。 4 5> **说明：** 6> 7> 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 导入模块 11 12``` 13import { ArcAlphabetIndexer, ArcAlphabetIndexerAttribute } from '@kit.ArkUI' 14``` 15 16 17## 子组件 18 19无 20 21 22## 接口 23 24ArcAlphabetIndexer(info: ArcAlphabetIndexerInitInfo) 25 26创建弧形索引条实例，传入弧形索引条配置项参数。 27 28**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 31 32**参数：** 参数内容为设置弧形索引条索引项字符串数组、初始选中项索引位置。 33 34| 参数名 | 类型 | 必填 | 说明 | 35| -------- | -------- | -------- | -------- | 36| info | [ArcAlphabetIndexerInitInfo](#arcalphabetindexerinitinfo对象说明) | 是 | 定义弧形字母索引条的初始化参数。 | 37 38 39## 属性 40 41除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 42 43### color 44 45color(color: Optional<ColorMetrics>) 46 47设置普通状态下索引项文字颜色。 48 49**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| ------ | ------------------------------------------ | ---- | ----------------------------------- | 57| color | [Optional<ColorMetrics>](../js-apis-arkui-graphics.md#colormetrics12) | 是 | 文字颜色。<br/>默认值：0xFFFFFF | 58 59### selectedColor 60 61selectedColor(color: Optional<ColorMetrics>) 62 63设置选中项文字颜色。 64 65**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 66 67**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 68 69**参数：** 70 71| 参数名 | 类型 | 必填 | 说明 | 72| ------ | ------------------------------------------ | ---- | ----------------------------------------- | 73| color | [Optional<ColorMetrics>](../js-apis-arkui-graphics.md#colormetrics12) | 是 | 选中项文字颜色。<br/>默认值：0xFFFFFF | 74 75### popupColor 76 77popupColor(color: Optional<ColorMetrics>) 78 79设置提示弹窗文字颜色。 80 81**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 84 85**参数：** 86 87| 参数名 | 类型 | 必填 | 说明 | 88| ------ | ------------------------------------------ | ---- | ------------------------------------------- | 89| color | [Optional<ColorMetrics>](../js-apis-arkui-graphics.md#colormetrics12) | 是 | 提示弹窗文字颜色。<br/>默认值：0xFFFFFF | 90 91### selectedBackgroundColor 92 93selectedBackgroundColor(color: Optional<ColorMetrics>) 94 95设置选中项背景颜色。 96 97**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 98 99**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 100 101**参数：** 102 103| 参数名 | 类型 | 必填 | 说明 | 104| ------ | ------------------------------------------ | ---- | ----------------------------------------- | 105| color | [Optional<ColorMetrics>](../js-apis-arkui-graphics.md#colormetrics12) | 是 | 选中项背景颜色。<br/>默认值：0x1F71FF | 106 107### popupBackground 108 109popupBackground(color: Optional<ColorMetrics>) 110 111设置提示弹窗背景色。 112 113**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------ | -------------------------------------------------------- | ---- | ------------------------------------------------------------ | 121| color | [Optional<ColorMetrics>](../js-apis-arkui-graphics.md#colormetrics12) | 是 | 提示弹窗背景色。<br/>默认值：0xD8404040 | 122 123> **说明：** 124> 125> 当通过popupBackground设置弹窗气泡的背景颜色后，不建议再通过[popupBackgroundBlurStyle](#popupbackgroundblurstyle)设置背景模糊效果。 126 127### usePopup 128 129usePopup(enabled: Optional<boolean>) 130 131设置是否使用提示弹窗。 132 133**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 134 135**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 136 137**参数：** 138 139| 参数名 | 类型 | 必填 | 说明 | 140| ------ | ------- | ---- | -------------------------------------- | 141| enabled | Optional<boolean> | 是 | 是否使用提示弹窗，true表示使用提示弹窗，false表示不使用提示弹窗。<br/>默认值：false，不使用提示弹窗。 | 142 143### selectedFont 144 145selectedFont(font: Optional<Font>) 146 147设置选中项文字尺寸、粗细、字体族、倾斜等样式。 148 149**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 150 151**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 152 153**参数：** 154 155| 参数名 | 类型 | 必填 | 说明 | 156| ------ | ---------------------------------------- | ---- | ------------------------------------------------------------ | 157| font | [Optional<Font>](ts-types.md#font) | 是 | 选中项文字样式。<br/>默认值：{<br/>size:'13.0fp',<br/> style:FontStyle.Normal,<br/> weight:500,<br/> family:'HarmonyOS Sans'<br/>} | 158 159### popupFont 160 161popupFont(font: Optional<Font>) 162 163设置提示弹窗字体样式。 164 165**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 166 167**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 168 169**参数：** 170 171| 参数名 | 类型 | 必填 | 说明 | 172| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 173| font | [Optional<Font>](ts-types.md#font) | 是 | 提示弹窗字体样式。<br/>默认值：<br/>{<br/>size:'19.0fp',<br/> style:FontStyle.Normal,<br/> weight:500,<br/> family:'HarmonyOS Sans'<br/>} | 174 175### font 176 177font(font: Optional<Font>) 178 179设置字母索引条默认字体样式。 180 181**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 182 183**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 184 185**参数：** 186 187| 参数名 | 类型 | 必填 | 说明 | 188| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 189| font | [Optional<Font>](ts-types.md#font) | 是 | 字母索引条默认字体样式。<br/>默认值：<br/>{<br/>size:'13.0fp',<br/> style:FontStyle.Normal,<br/> weight:500,<br/> family:'HarmonyOS Sans'<br/>} | 190 191### itemSize 192 193itemSize(size: Optional<LengthMetrics>) 194 195设置字母索引条字母区域大小。 196 197**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 198 199**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 200 201**参数：** 202 203| 参数名 | 类型 | 必填 | 说明 | 204| ------ | -------------------------- | ---- | ------------------------------------------------------------ | 205| size | [Optional<LengthMetrics>](../js-apis-arkui-graphics.md#lengthmetrics12) | 是 | 字母索引条字母区域大小，字母区域为圆形，即圆形直径。不支持设置为百分比。<br/>默认值：24.0 <br/>单位：vp | 206 207### selected 208 209selected(index: Optional<number>) 210 211设置选中项索引值。 212 213**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 216 217**参数：** 218 219| 参数名 | 类型 | 必填 | 说明 | 220| ------ | ------ | ---- | ---------------------------- | 221| index | Optional<number> | 是 | 选中项索引值 <br/>默认值：0 <br/>该参数支持[!!](../../../ui/state-management/arkts-new-binding.md)双向绑定变量。| 222 223### autoCollapse 224 225autoCollapse(enable: Optional<boolean>) 226 227设置是否使用自适应折叠模式。 228 229**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 230 231**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 232 233**参数：** 234 235| 参数名 | 类型 | 必填 | 说明 | 236| ------ | ------- | ---- | ------------------------------------------ | 237| enable | Optional<boolean> | 是 | 是否使用自适应折叠模式。<br/>默认值：true，使用自适应折叠模式。 | 238 239### popupBackgroundBlurStyle 240 241popupBackgroundBlurStyle(style: Optional<BlurStyle>) 242 243设置提示弹窗的背景模糊材质。 244 245**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 246 247**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 248 249**参数：** 250 251| 参数名 | 类型 | 必填 | 说明 | 252| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 253| style | [Optional<BlurStyle>](ts-universal-attributes-background.md#blurstyle9) | 是 | 设置提示弹窗的背景模糊材质。<br/>默认值：NONE。 | 254 255> **说明：** 256> 257> 当通过popupBackgroundBlurStyle设置弹窗气泡的背景模糊材质时，不建议再通过[popupBackground](#popupbackground)设置背景色。 258 259## 事件 260 261除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 262 263### onSelect 264 265onSelect(handler: Optional<OnSelectCallback>) 266 267索引条选中回调，返回值为当前选中索引。 268 269**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 270 271**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 272 273**参数：** 274 275| 参数名 | 类型 | 必填 | 说明 | 276| ------ | ------ | ---- | ---------------- | 277| handler | Optional<[OnSelectCallback](#onselectcallback)> | 是 | 回调函数类型。 | 278 279 280## ArcAlphabetIndexerInitInfo对象说明 281 282定义弧形字母索引条的初始化参数。 283 284**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 285 286**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 287 288**参数：** 289 290| 名称 | 类型 | 必填 | 说明 | 291| -------- | -------- | -------- | -------- | 292| arrayValue | string[] | 是 | 字母索引字符串数组，不可设置为空。 | 293| selected | number | 是 | 初始选中项索引值，若超出索引值范围，则取默认值0。<br />该参数支持[!!](../../../ui/state-management/arkts-new-binding.md)双向绑定变量。| 294 295## OnSelectCallback 296 297type OnSelectCallback = (index: number) => void 298 299定义[onSelect](#onselect)中使用的回调类型。 300 301**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 302 303**系统能力：** SystemCapability.ArkUI.ArkUI.Circle 304 305**参数：** 306 307| 参数名 | 类型 | 必填 | 说明 | 308| ------ | ------ | ---- | ---------------- | 309| index | number | 是 | 选中项序号。 | 310 311 312## 示例 313 314该示例实现了弧形索引条和弧形列表联动控制和定位。 315 316```ts 317// xxx.ets 318import { 319 LengthMetrics, 320 ColorMetrics, 321 ArcList, 322 ArcListItem, 323 ArcListAttribute, 324 ArcListItemAttribute, 325 ArcAlphabetIndexer, 326 ArcAlphabetIndexerAttribute 327} from '@kit.ArkUI'; 328 329@Builder 330function buildText() { 331 Stack() { 332 Text("head") 333 .fontSize(30) 334 .padding(10) 335 .backgroundColor(0xF9CF93) 336 .border({ width: '1px', color: Color.Black }) 337 338 Divider().width('100%').height('1px') 339 } 340 .alignContent(Alignment.Bottom) 341} 342 343@Entry 344@Component 345struct ArcListAndIndexer { 346 private fullValue: string[] = [ 347 '#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 348 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' 349 ] 350 private arrName : string[] = [ 351 '1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20', 352 '21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38', 353 '39','40', '41','42', 354 ]; 355 356 private scrollerForList: Scroller = new Scroller() 357 @State indexerIndex: number = 0; 358 359 private watchSize: string = '466px' // 手表默认宽高：233*233 360 private itemSize: number = 24 // 索引项默认大小：24 361 362 build() { 363 Column() { 364 Row() { 365 Stack() { 366 ArcList({ scroller : this.scrollerForList, initialIndex: 0 }) { 367 ForEach(this.arrName, (itemName: string, index: number) => { 368 ArcListItem() { 369 Text(itemName) 370 .width('90%') 371 .height('92px') 372 .fontSize(16) 373 .textAlign(TextAlign.Center) 374 .backgroundColor(index % 2 == 0 ? 0xAFEEEE : 0x00FFFF) 375 .borderRadius(23) 376 } 377 }) 378 } 379 .scrollBar(BarState.Off) 380 .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { 381 this.indexerIndex = centerIndex; 382 }) 383 .borderWidth(1) 384 .width(this.watchSize) 385 .height(this.watchSize) 386 .borderRadius(this.watchSize) 387 .space(LengthMetrics.px(4)) 388 389 ArcAlphabetIndexer({ arrayValue: this.fullValue, selected: 0 }) 390 .autoCollapse(true) 391 .width(this.watchSize) 392 .height(this.watchSize) 393 .usePopup(false) 394 .selected(this.indexerIndex) 395 .onSelect((index: number) => { 396 this.indexerIndex = index 397 this.scrollerForList.scrollToIndex(this.indexerIndex) 398 }) 399 .borderWidth(1) 400 .hitTestBehavior(HitTestMode.Transparent) 401 .selectedColor(ColorMetrics.resourceColor(0xFFFFFF)) 402 .selectedBackgroundColor(ColorMetrics.resourceColor(0x1F71FF)) 403 .color(ColorMetrics.resourceColor(0xFFFFFF)) 404 .popupColor(ColorMetrics.resourceColor(0xFFFFFF)) 405 .popupBackground(ColorMetrics.resourceColor(0xD8404040)) 406 .itemSize(LengthMetrics.px(this.itemSize)) 407 .selectedFont({ 408 size:'11.0fp', 409 style:FontStyle.Normal, 410 weight:500, 411 family:'HarmonyOS Sans' 412 }) 413 .font({ 414 size:'11.0fp', 415 style:FontStyle.Normal, 416 weight:500, 417 family:'HarmonyOS Sans' 418 }) 419 420 }.width('100%').height('100%') 421 }.width('100%').height('100%') 422 } 423 } 424} 425``` 426 427 428
