文章目录前言这页的阅读顺序我建议这样走先把谁在驱动页面这件事搞清楚我会优先读的就是这几段逻辑第一段关键代码页面是怎么被带起来的第二段关键代码真正决定交互手感的地方真要学会用自己过一遍这条操作线直接照搬不够最好再补这几刀我觉得它真正有价值的地方在这完整代码收个尾前言很多人第一次接触 AlphabetIndexer 时容易只盯着索引条本身。实际上它最有价值的地方在于和列表滚动行为联动之后页面导航效率会明显提升。这个案例正好把这件事讲清楚。 我一直觉得好示例不一定代码多但一定能把“为什么要这么写”交代清楚。字母索引联动列表示例 这个页面就属于这种值得停下来认真拆一遍。如果把这页当成练习材料我会优先看它怎样围绕 AlphabetIndexer 与 List 组件联动 组织页面。因为这一层想清楚了后面的代码基本就不会散。这类写法尤其适合落在 长列表导航、联系人检索、分组数据快速跳转 这些场景里所以我下面不会只讲“组件怎么写”而是更关心“放进页面之后为什么这样组织”。这页的阅读顺序我建议这样走很多人学示例会直接复制 UI 代码结果复刻出来是像的但后面一改就散。原因通常不是代码抄错了而是结构关系没先看懂。页面区域主要职责在代码里的典型表现头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案核心展示区承载组件能力的主要效果Column、Row、业务组件本体| 辅助信息区 | 补充状态、标签、分组或统计信息 | 次级文本、角标、分组标题、描述块 || 交互入口区 | 负责切换、返回、定位、选择等动作 | 点击事件、按钮、索引条、导航入口 |这一页没有额外拆出接口页面更多是直接围绕基础数据和组件参数展开。我会把它当成真实业务页面来拆重点看哪些写法可以直接迁到项目里哪些只是示例环境下的轻量实现。先把谁在驱动页面这件事搞清楚如果一个示例后续不好改十有八九不是布局有问题而是状态职责没分开。这个案例刚好适合拿来观察这件事。这个页面比基础版多了一层关键关系索引条不只是自己高亮还要带动左侧列表定位。isShow仍然只是示例展示开关。selectedIndex保存当前点击的字母下标既决定索引条选中态也决定应该滚到哪个ListItemGroup。listScroller负责把“选中了哪个字母”翻译成真实列表滚动行为。所以这里真正要看的不是 AlphabetIndexer 单独怎么显示而是selectedIndex和listScroller如何把右侧索引、左侧分组列表连成一条交互链。我会优先读的就是这几段逻辑示例代码里最怕被忽略的就是那些看起来普通、实际上掌控页面节奏的方法。这里建议优先把它们摸清。这个案例没有太多额外方法核心价值主要集中在页面结构和组件组合方式。我自己读这类方法时通常只抓一条线谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来很多交互代码一下就顺了。第一段关键代码页面是怎么被带起来的这一段建议慢一点看。它通常决定了页面初始状态也决定了后续哪些区域会跟着刷新。StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){Column(){if(this.isShow){Column({space:16}){Text(配合 List 使用).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(AlphabetIndexer 与 List 联动点击字母滚动到对应分组).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Row(){List({scroller:this.listScroller}){ForEach(letters,(letter:string){ListItemGroup(){ListItem(){Text(letter)这一段我通常不会一下翻过去而是先确认下面这几个判断点State字段到底在控制显示、选择、跳转结果还是模式切换。默认值是不是合理页面一打开会不会就落在一个可理解的状态上。字段命名能不能让后来的人一眼看懂用途而不是还要翻半天 UI。第二段关键代码真正决定交互手感的地方这一段完整代码的重点在letters、dataMap和listScroller。letters决定索引条展示哪些入口dataMap决定每个分组里有什么内容listScroller则把用户点字母这件事落到列表滚动上。三者配合起来才是一个真正可用的字母索引列表。/** * 字母索引联动列表示例 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesconstletters:string[]ABCDEFG.split()constdataMap:Recordstring,string[]{A:[Alice,Amy,Andrew,Anna,Alex],B:[Bob,Betty,Bill,Bella,Brian],C:[Cathy,Carl,Chloe,Chris,Cindy],D:[David,Diana,Daniel,Daisy,Derek],E:[Emily,Edward,Eva,Eric,Ella],F:[Frank,Fiona,Fred,Fay,Felix],G:[Grace,George,Gina,Gary,Glen],}EntryComponentstruct AlphabetIndexerWithList{StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){代码读到这里我通常会顺手补三件事不然后面很容易只看热闹这个交互入口接收的到底是什么输入。输入进来之后代码改了哪个状态或者触发了哪次导航。变化发生后用户最先感知到的反馈会落在哪个区域。这三个问题串起来之后这一页基本就不只是“看过”而是真的读懂了。真要学会用自己过一遍这条操作线第一次接触这个案例时不要急着扩展功能。先把默认状态和一次完整交互跑顺后面加东西才不会歪。先进入页面确认首屏是不是把字母索引联动列表示例的主题交代清楚。盯住核心展示区观察默认状态下最醒目的内容是什么。主动触发一次关键交互比如点击、滑动、跳转、返回、切换或者选择。回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。最后再打开源码对照刚才那次交互把状态变化链路串起来。如果这五步你能边操作边说清楚页面发生了什么后面再换成自己的数据和交互心里会稳很多。直接照搬不够最好再补这几刀我自己迁示例代码时最怕的是把展示逻辑和业务逻辑粘成一团。这个案例里有些地方可以提前规避。字母索引类页面建议先把分组数据结构稳定下来再去调索引条样式和反馈层。一旦页面里还要加搜索、筛选或定位结果状态来源最好先分层不然后面很容易互相覆盖。只要页面里有重复块就别硬撑着手写到底早点抽成小组件后面改样式和改交互都会轻松很多。示例数据最好和布局代码分开放不然后面一接接口页面文件很容易立刻变臃肿。我觉得它真正有价值的地方在这我会把这类案例当成“工程感比炫技感更强”的材料来留存。后面真的要做同类页面时能少走不少弯路。页面结构比较稳后续不管是换数据还是换皮肤成本都不会特别高。状态数量总体可控适合拿来练“一个页面里如何分配职责”这件事。组件参数和页面目标之间关系比较直观不太会出现“能跑但看不懂为什么这么配”的情况。完整代码下面保留整理过命名的完整 ArkTS 代码方便你直接对照学习。这里已经去掉原始的 Demo 命名改成了更贴近当前案例语义的名称。/** * 字母索引联动列表示例 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesconstletters:string[]ABCDEFG.split()constdataMap:Recordstring,string[]{A:[Alice,Amy,Andrew,Anna,Alex],B:[Bob,Betty,Bill,Bella,Brian],C:[Cathy,Carl,Chloe,Chris,Cindy],D:[David,Diana,Daniel,Daisy,Derek],E:[Emily,Edward,Eva,Eric,Ella],F:[Frank,Fiona,Fred,Fay,Felix],G:[Grace,George,Gina,Gary,Glen],}EntryComponentstruct AlphabetIndexerWithList{StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){Column(){if(this.isShow){Column({space:16}){Text(配合 List 使用).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(AlphabetIndexer 与 List 联动点击字母滚动到对应分组).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Row(){List({scroller:this.listScroller}){ForEach(letters,(letter:string){ListItemGroup(){ListItem(){Text(letter).fontSize(16).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR).width(100%).padding({left:12,top:8,bottom:4}).backgroundColor(#F5F5F5)}ForEach(dataMap[letter]asstring[],(name:string){ListItem(){Text(name).fontSize(15).fontColor(#333333).width(100%).padding({left:16,top:10,bottom:10})}})}})}.layoutWeight(1).height(100%).divider({strokeWidth:0.5,color:#EEEEEE}).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)AlphabetIndexer({arrayValue:letters,selected:this.selectedIndex}).selectedColor(DEMO_THEME_COLOR).popupColor(DEMO_THEME_COLOR).popupBackground(#FFFFFF).popupSelectedColor(DEMO_THEME_COLOR).usingPopup(true).selectedBackgroundColor(#E8EAF6).itemSize(14).onSelect((index:number){this.selectedIndexindexthis.listScroller.scrollToIndex(index)})}.width(100%).height(100%)}.alignItems(HorizontalAlign.Start)}}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}收个尾这个案例没有故意炫技反而因此更适合学习。页面目标清楚、代码组织也相对直接拿来练手或者做项目骨架都不亏。
HarmonyOS7字母索引联动列表示例实战：AlphabetIndexer 与 List 组件联动
文章目录前言这页的阅读顺序我建议这样走先把谁在驱动页面这件事搞清楚我会优先读的就是这几段逻辑第一段关键代码页面是怎么被带起来的第二段关键代码真正决定交互手感的地方真要学会用自己过一遍这条操作线直接照搬不够最好再补这几刀我觉得它真正有价值的地方在这完整代码收个尾前言很多人第一次接触 AlphabetIndexer 时容易只盯着索引条本身。实际上它最有价值的地方在于和列表滚动行为联动之后页面导航效率会明显提升。这个案例正好把这件事讲清楚。 我一直觉得好示例不一定代码多但一定能把“为什么要这么写”交代清楚。字母索引联动列表示例 这个页面就属于这种值得停下来认真拆一遍。如果把这页当成练习材料我会优先看它怎样围绕 AlphabetIndexer 与 List 组件联动 组织页面。因为这一层想清楚了后面的代码基本就不会散。这类写法尤其适合落在 长列表导航、联系人检索、分组数据快速跳转 这些场景里所以我下面不会只讲“组件怎么写”而是更关心“放进页面之后为什么这样组织”。这页的阅读顺序我建议这样走很多人学示例会直接复制 UI 代码结果复刻出来是像的但后面一改就散。原因通常不是代码抄错了而是结构关系没先看懂。页面区域主要职责在代码里的典型表现头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案核心展示区承载组件能力的主要效果Column、Row、业务组件本体| 辅助信息区 | 补充状态、标签、分组或统计信息 | 次级文本、角标、分组标题、描述块 || 交互入口区 | 负责切换、返回、定位、选择等动作 | 点击事件、按钮、索引条、导航入口 |这一页没有额外拆出接口页面更多是直接围绕基础数据和组件参数展开。我会把它当成真实业务页面来拆重点看哪些写法可以直接迁到项目里哪些只是示例环境下的轻量实现。先把谁在驱动页面这件事搞清楚如果一个示例后续不好改十有八九不是布局有问题而是状态职责没分开。这个案例刚好适合拿来观察这件事。这个页面比基础版多了一层关键关系索引条不只是自己高亮还要带动左侧列表定位。isShow仍然只是示例展示开关。selectedIndex保存当前点击的字母下标既决定索引条选中态也决定应该滚到哪个ListItemGroup。listScroller负责把“选中了哪个字母”翻译成真实列表滚动行为。所以这里真正要看的不是 AlphabetIndexer 单独怎么显示而是selectedIndex和listScroller如何把右侧索引、左侧分组列表连成一条交互链。我会优先读的就是这几段逻辑示例代码里最怕被忽略的就是那些看起来普通、实际上掌控页面节奏的方法。这里建议优先把它们摸清。这个案例没有太多额外方法核心价值主要集中在页面结构和组件组合方式。我自己读这类方法时通常只抓一条线谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来很多交互代码一下就顺了。第一段关键代码页面是怎么被带起来的这一段建议慢一点看。它通常决定了页面初始状态也决定了后续哪些区域会跟着刷新。StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){Column(){if(this.isShow){Column({space:16}){Text(配合 List 使用).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(AlphabetIndexer 与 List 联动点击字母滚动到对应分组).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Row(){List({scroller:this.listScroller}){ForEach(letters,(letter:string){ListItemGroup(){ListItem(){Text(letter)这一段我通常不会一下翻过去而是先确认下面这几个判断点State字段到底在控制显示、选择、跳转结果还是模式切换。默认值是不是合理页面一打开会不会就落在一个可理解的状态上。字段命名能不能让后来的人一眼看懂用途而不是还要翻半天 UI。第二段关键代码真正决定交互手感的地方这一段完整代码的重点在letters、dataMap和listScroller。letters决定索引条展示哪些入口dataMap决定每个分组里有什么内容listScroller则把用户点字母这件事落到列表滚动上。三者配合起来才是一个真正可用的字母索引列表。/** * 字母索引联动列表示例 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesconstletters:string[]ABCDEFG.split()constdataMap:Recordstring,string[]{A:[Alice,Amy,Andrew,Anna,Alex],B:[Bob,Betty,Bill,Bella,Brian],C:[Cathy,Carl,Chloe,Chris,Cindy],D:[David,Diana,Daniel,Daisy,Derek],E:[Emily,Edward,Eva,Eric,Ella],F:[Frank,Fiona,Fred,Fay,Felix],G:[Grace,George,Gina,Gary,Glen],}EntryComponentstruct AlphabetIndexerWithList{StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){代码读到这里我通常会顺手补三件事不然后面很容易只看热闹这个交互入口接收的到底是什么输入。输入进来之后代码改了哪个状态或者触发了哪次导航。变化发生后用户最先感知到的反馈会落在哪个区域。这三个问题串起来之后这一页基本就不只是“看过”而是真的读懂了。真要学会用自己过一遍这条操作线第一次接触这个案例时不要急着扩展功能。先把默认状态和一次完整交互跑顺后面加东西才不会歪。先进入页面确认首屏是不是把字母索引联动列表示例的主题交代清楚。盯住核心展示区观察默认状态下最醒目的内容是什么。主动触发一次关键交互比如点击、滑动、跳转、返回、切换或者选择。回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。最后再打开源码对照刚才那次交互把状态变化链路串起来。如果这五步你能边操作边说清楚页面发生了什么后面再换成自己的数据和交互心里会稳很多。直接照搬不够最好再补这几刀我自己迁示例代码时最怕的是把展示逻辑和业务逻辑粘成一团。这个案例里有些地方可以提前规避。字母索引类页面建议先把分组数据结构稳定下来再去调索引条样式和反馈层。一旦页面里还要加搜索、筛选或定位结果状态来源最好先分层不然后面很容易互相覆盖。只要页面里有重复块就别硬撑着手写到底早点抽成小组件后面改样式和改交互都会轻松很多。示例数据最好和布局代码分开放不然后面一接接口页面文件很容易立刻变臃肿。我觉得它真正有价值的地方在这我会把这类案例当成“工程感比炫技感更强”的材料来留存。后面真的要做同类页面时能少走不少弯路。页面结构比较稳后续不管是换数据还是换皮肤成本都不会特别高。状态数量总体可控适合拿来练“一个页面里如何分配职责”这件事。组件参数和页面目标之间关系比较直观不太会出现“能跑但看不懂为什么这么配”的情况。完整代码下面保留整理过命名的完整 ArkTS 代码方便你直接对照学习。这里已经去掉原始的 Demo 命名改成了更贴近当前案例语义的名称。/** * 字母索引联动列表示例 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesconstletters:string[]ABCDEFG.split()constdataMap:Recordstring,string[]{A:[Alice,Amy,Andrew,Anna,Alex],B:[Bob,Betty,Bill,Bella,Brian],C:[Cathy,Carl,Chloe,Chris,Cindy],D:[David,Diana,Daniel,Daisy,Derek],E:[Emily,Edward,Eva,Eric,Ella],F:[Frank,Fiona,Fred,Fay,Felix],G:[Grace,George,Gina,Gary,Glen],}EntryComponentstruct AlphabetIndexerWithList{StateisShow:booleantrueStateselectedIndex:number0privatelistScroller:ScrollernewScroller()build(){Column(){if(this.isShow){Column({space:16}){Text(配合 List 使用).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(AlphabetIndexer 与 List 联动点击字母滚动到对应分组).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)Row(){List({scroller:this.listScroller}){ForEach(letters,(letter:string){ListItemGroup(){ListItem(){Text(letter).fontSize(16).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR).width(100%).padding({left:12,top:8,bottom:4}).backgroundColor(#F5F5F5)}ForEach(dataMap[letter]asstring[],(name:string){ListItem(){Text(name).fontSize(15).fontColor(#333333).width(100%).padding({left:16,top:10,bottom:10})}})}})}.layoutWeight(1).height(100%).divider({strokeWidth:0.5,color:#EEEEEE}).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)AlphabetIndexer({arrayValue:letters,selected:this.selectedIndex}).selectedColor(DEMO_THEME_COLOR).popupColor(DEMO_THEME_COLOR).popupBackground(#FFFFFF).popupSelectedColor(DEMO_THEME_COLOR).usingPopup(true).selectedBackgroundColor(#E8EAF6).itemSize(14).onSelect((index:number){this.selectedIndexindexthis.listScroller.scrollToIndex(index)})}.width(100%).height(100%)}.alignItems(HorizontalAlign.Start)}}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}收个尾这个案例没有故意炫技反而因此更适合学习。页面目标清楚、代码组织也相对直接拿来练手或者做项目骨架都不亏。
