更多内容请访问：51CTO与华为官方共建鸿蒙技术社区https://ost.51cto.com前言前段时间更新了SDK版本。看了更新介绍，ArkUI(TS)主要是增加了一个文本输入组件。更新版本后，发现部分组件也进行了更新优化。所以我想写这个项目。项目描述本项目的界面基于ArkUI中TS扩展的声明式开发范式。语法和概念请参考官网官方文档地址：基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2。工具版本：DevEcoStudio3.0Beta2。SDK版本：3.0.0.1（API版本7Beta2）。主要知识点列表容器（List）：本次更新增加了Scroller，可以控制列表的跳转位置。循环渲染（ForEach）：本次更新修复了索引无法使用的问题。字母表索引器。效果演示1.字母索引导航到列表对应位置，2.列表滑动时，也同步定位到字母索引。实现思路1.布局主体结构。//堆栈容器，右方向Stack({alignContent:Alignment.End}){//列表布局Column(){List(){......}}.width('100%').height('100%')//字母表索引导航AlphabetIndexer()}2.列表数据格式。[{name:'周杰伦',headerWord:'Z'},{name:'林俊杰',headerWord:'L'},{name:'陈奕迅',headerWord:'C'},{name:'JoeXue',headerWord:'X'},......]3.列表布局。这部分需要注意的是分组效果：相同的字母只能显示一个。//列表数据privatelistContacts:Array=getContactsList()//滚动控制器privatescroller:Scroller=newScroller()List({scroller:this.scroller}){ForEach(this.listContacts,(item:Contacts,index)=>{ListItem(){Column(){//字母布局if(index==0){//第一个必须显示this.HeaderWord(item)}else{//当前字母和前一个字母不同时显示=>index.toString())}4.字母索引导航。(1)获取列表中对应的字母和索引的图集，与列表字母布局显示条件相同。让mapAlphabetsIndex:Map=newMap()for(vari=0;i{//Selected事件回调//选中字母表constalphabets=this.alphabets[index]//查询字母表在列表中的索引constselectedIndex=this.mapAlphabetsIndex.get(alphabet);//跳转到指定索引处positionthis.scroller.scrollToIndex(selectedIndex)})5.滑动列表选择字母。List({scroller:this.scroller}){......}.onScrollIndex((start,end)=>{//滑动时监听top索引，查询对应数据constelement=this.listContacts[start]//更新选中字母索引this.selectedIndex=this.alphabets.indexOf(element.headerWord)})项目地址项目添加一个汉字转拼音的工具类。https://gitee.com/liangdidi/AlphabetIndexerDemo.git（需要登录才能看到demo图）总结本项目经典的使用场景是联系人。实现过程中需要注意：数据源使用拼音工具类获取大写首字母，并对列表进行排序。字母排版的显示情况，相同的字母只显示一个。初始化时将首字母及其索引存储在map中，AlphabetIndexer组件在onSelected回调中获取字母对应的索引，滑动到指定列表位置。List组件在onScrollIndex回调中监听滑动到当前顶部的index，更新选中字母的index。每天进步一点点，需要付出一点点努力。更多资讯请浏览：?????????????????????????????????????????????????????????
