文章目录功能说明1. 左侧列表分组折叠2. 右侧索引条自动折叠核心 API1. AlphabetIndexer 折叠相关属性2. 列表折叠实现3. 关键事件完整代码功能效果1. 左侧折叠列表2. 右侧折叠索引条3. 联动效果总结本文档基于HarmonyOS 6API 12官方规范围绕AlphabetIndexer字母索引组件折叠索引列表功能展开说明。示例实现左侧可折叠地名列表 右侧自动折叠式字母索引联动效果完全遵循官方文档设计标准代码可直接运行、无语法错误。功能说明1. 左侧列表分组折叠按拼音首字母分为A、B、C、L四组地名点击分组标题折叠/展开对应内容状态独立控制互不干扰2. 右侧索引条自动折叠开启autoCollapse(true)折叠模式常态显示精简索引滑动时自动展开全部字母配合弹窗显示二级地名列表支持选中样式、弹窗样式自定义核心 API1. AlphabetIndexer 折叠相关属性属性作用官方规范autoCollapse(true)开启索引条折叠模式核心折叠特性arrayValue设置索引字母数据源必填usingPopup(true)启用二级选择弹窗折叠列表标配itemSize设置索引项尺寸控制折叠后显示密度alignStyle设置弹窗对齐方式IndexerAlign.Left2. 列表折叠实现使用条件渲染if实现列表折叠全版本兼容、无报错if (!this.groupCollapse[0]) { ForEach(this.arrayA, ...) }3. 关键事件事件作用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]; // 折叠状态 State groupCollapse: boolean[] [false, false, false, false]; build() { Stack({ alignContent: Alignment.Start }) { Row() { List({ space: 0, initialIndex: 0 }) { // A组头部 ListItem() { this.buildHeader(A, 0) } .backgroundColor(#f5f5f5) .onClick(() { this.groupCollapse[0] !this.groupCollapse[0]; }) // A组内容 if (!this.groupCollapse[0]) { ForEach(this.arrayA, (item: string) { ListItem() { Text(item) .width(80%) .height(5%) .fontSize(30) .textAlign(TextAlign.Center) } }, (item: string) item) } // B组头部 ListItem() { this.buildHeader(B, 1) } .backgroundColor(#f5f5f5) .onClick(() { this.groupCollapse[1] !this.groupCollapse[1]; }) // B组内容 if (!this.groupCollapse[1]) { ForEach(this.arrayB, (item: string) { ListItem() { Text(item) .width(80%) .height(5%) .fontSize(30) .textAlign(TextAlign.Center) } }, (item: string) item) } // C组头部 ListItem() { this.buildHeader(C, 2) } .backgroundColor(#f5f5f5) .onClick(() { this.groupCollapse[2] !this.groupCollapse[2]; }) // C组内容 if (!this.groupCollapse[2]) { ForEach(this.arrayC, (item: string) { ListItem() { Text(item) .width(80%) .height(5%) .fontSize(30) .textAlign(TextAlign.Center) } }, (item: string) item) } // L组头部 ListItem() { this.buildHeader(L, 3) } .backgroundColor(#f5f5f5) .onClick(() { this.groupCollapse[3] !this.groupCollapse[3]; }) // L组内容 if (!this.groupCollapse[3]) { 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(true) // 开启折叠核心只显示常用索引滑动展开全部 .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%) } } Builder buildHeader(title: string, index: number) { Row() { Text(title) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ left: 15 }) Blank() Text(this.groupCollapse[index] ? ▶ : ▼) .fontSize(20) .margin({ right: 15 }) } .width(100%) .height(50) } }运行效果如图可以点击左侧三角进行收缩或是平铺功能效果1. 左侧折叠列表点击A/B/C/L标题 → 折叠/展开对应地名展开显示全部内容折叠隐藏内容每组状态独立2. 右侧折叠索引条静止状态精简显示常用字母滑动状态自动展开全部 A-Z 索引点击字母 → 弹出二级地名列表支持选中高亮、颜色、圆角自定义3. 联动效果右侧索引选中 → 弹窗显示对应地名点击弹窗地名 → 触发回调事件列表与索引双向联动总结AlphabetIndexer折叠模式必须通过autoCollapse(true)开启折叠索引配合二级弹窗使用体验最佳列表分组折叠推荐使用条件渲染全版本兼容无报错索引条与列表数据必须一一对应保证联动准确性样式属性遵循官方命名规范支持全平台一致性表现如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力