HarmonyOS 6 ArkTS AlphabetIndexer 地名字母索引使用文档

文章目录组件功能核心 API1. 组件常用属性2. 关键事件完整代码功能与效果说明1. 地名分组2. 交互效果总结本文档基于HarmonyOS 6API 12官方规范以全国地名字母快速索引为实战场景详细讲解AlphabetIndexer字母索引组件的完整使用方法。示例实现右侧字母索引 地名列表 二级弹窗选择功能完全遵循官方API设计标准代码可直接运行。组件功能AlphabetIndexer是鸿蒙系统提供的字母索引组件常用于联系人、城市列表、字典等场景。本示例实现核心能力右侧显示A-Z 字母索引条点击/滑动索引自动弹出二级地名列表支持索引选中样式、弹窗样式自定义提供索引选中、弹窗选中回调事件结合List组件展示对应首字母地名核心 API1. 组件常用属性属性作用arrayValue设置索引字母数组如 A-Zselected设置默认选中索引usingPopup是否显示二级弹窗itemSize设置索引项尺寸alignStyle弹窗对齐方式selectedColor选中文字颜色selectedBackgroundColor选中背景色popupBackground弹窗背景色popupFont弹窗字体样式itemBorderRadius索引项圆角2. 关键事件事件说明onSelect右侧索引被选中时触发onRequestPopupData请求二级弹窗数据返回字符串数组onPopupSelect二级弹窗条目被点击时触发完整代码// xxx.ets Entry Component struct AlphabetIndexerSample { // A 开头地名 private arrayA: string[] [安徽, 安庆, 安阳, 鞍山, 安顺]; // B 开头地名 private arrayB: string[] [北京, 保定, 包头, 滨州, 蚌埠, 宝鸡, 百色]; // C 开头地名 private arrayC: string[] [重庆, 成都, 长沙, 长春, 常州, 沧州, 赤峰]; // L 开头地名 private arrayL: string[] [兰州, 洛阳, 临沂, 聊城, 柳州, 丽江, 六安, 莱芜]; // 右侧字母索引条 private value: string[] [#, A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z]; build() { Stack({ alignContent: Alignment.Start }) { Row() { List({ space: 20, initialIndex: 0 }) { // A 组地名 ForEach(this.arrayA, (item: string) { ListItem() { Text(item) .width(80%) .height(5%) .fontSize(30) .textAlign(TextAlign.Center) } }, (item: string) item) // B 组地名 ForEach(this.arrayB, (item: string) { ListItem() { Text(item) .width(80%) .height(5%) .fontSize(30) .textAlign(TextAlign.Center) } }, (item: string) item) // C 组地名 ForEach(this.arrayC, (item: string) { ListItem() { Text(item) .width(80%) .height(5%) .fontSize(30) .textAlign(TextAlign.Center) } }, (item: string) item) // L 组地名 ForEach(this.arrayL, (item: string) { ListItem() { Text(item) .width(80%) .height(5%) .fontSize(30) .textAlign(TextAlign.Center) } }, (item: string) item) } .width(50%) .height(100%) AlphabetIndexer({ arrayValue: this.value, selected: 0 }) .autoCollapse(false) .enableHapticFeedback(false) .selectedColor(0xFFFFFF) .popupColor(0xFFFAF0) .selectedBackgroundColor(0xCCCCCC) .popupBackground(0xD2B48C) .usingPopup(true) .selectedFont({ size: 16, weight: FontWeight.Bolder }) .popupFont({ size: 30, weight: FontWeight.Bolder }) .itemSize(28) .alignStyle(IndexerAlign.Left) .popupItemBorderRadius(24) .itemBorderRadius(14) .popupBackgroundBlurStyle(BlurStyle.NONE) .popupTitleBackground(0xCCCCCC) .popupSelectedColor(0x00FF00) .popupUnselectedColor(0x0000FF) .popupItemFont({ size: 30, style: FontStyle.Normal }) .popupItemBackgroundColor(0xCCCCCC) .onSelect((index: number) { console.info(this.value[index] 选中); }) .onRequestPopupData((index: number) { // 点击右侧字母 → 自动弹出对应地名列表 if (this.value[index] A) { return this.arrayA; } else if (this.value[index] B) { return this.arrayB; } else if (this.value[index] C) { return this.arrayC; } else if (this.value[index] L) { return this.arrayL; } else { return []; } }) .onPopupSelect((index: number) { console.info(弹窗选中地名下标 index); }) } .width(100%) .height(100%) } } }运行效果如图当点击字母时左侧出现相关联的内容功能与效果说明1. 地名分组A → 安徽、安庆、安阳、鞍山、安顺B → 北京、保定、包头、滨州、蚌埠、宝鸡、百色C → 重庆、成都、长沙、长春、常州、沧州、赤峰L → 兰州、洛阳、临沂、聊城、柳州、丽江、六安、莱芜2. 交互效果右侧滑动/点击字母索引自动弹出二级地名列表列表实时显示对应首字母城市支持索引选中高亮、样式自定义点击弹窗地名可触发回调事件总结AlphabetIndexer必须绑定arrayValue索引数组二级弹窗数据通过onRequestPopupData返回支持字体、颜色、圆角、模糊等全样式自定义配合List实现高性能索引列表适用于所有需要快速定位的长列表场景如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力