使用AlphabetIndexer组件实现建议通讯录页面

实现一个简易的通讯录功能,可以实现快捷跳转以及滚动刷新的功能。该功能用到的场景较多,比如通讯录、页签、列表分类等多类场景。

HarmonyOS
2024-05-26 14:24:50
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
HearMe_cn

实现基本原理:通过List组件渲染通讯录中联系人的信息,通过AlphabetIndexer组件实现右侧的快速定位容器栏,然后将两者数据进行绑定实现联动效果。

代码如下:

class Contacts { 
  constructor(index: string, names: string[]) { 
    this.index = index 
    this.names = names 
  } 
 
  index: string // 序号 
  names: string[] // 姓名组 
} 
 
@Entry 
@Component 
struct Index { 
  @State contacts: Contacts[] = [ 
    new Contacts('A', ["a", "aa", "aaa"]), 
    new Contacts('B', ["b", "bbb", "bb"]), 
    new Contacts('C', ["c", "cc", "ccc"]), 
    new Contacts('D', ["d", "dd", "ddd"]), 
    new Contacts('E', ["e", "ee"]), 
    new Contacts('F', ["f", "ff"]), 
    new Contacts('G', ["g", "gg", "ggg"]), 
    new Contacts('H', ["h", "hh", "hhh"]), 
  ] 
  scroller: Scroller = new Scroller() // list 滚动控制 
  value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] 
  @State flag: number = 0 // 绑定AlphabetIndexer的index 
  preIndex: number = 0; 
 
  build() { 
    Row() { 
      List({ space: 20, initialIndex: 0, scroller: this.scroller }) { 
        ForEach(this.contacts, (value: Contacts) => { 
          ListItem() { 
            Column() { 
              Text('' + value.index) 
                .fontSize(30) 
                .textAlign(TextAlign.Center) 
                .backgroundColor('#ffffff') 
                .margin(30) 
              ForEach(value.names, (name: string) => { 
                Column({ space: 10 }) { 
                  Text('' + name) 
                    .fontSize(20) 
                    .textAlign(TextAlign.Center) 
                    .backgroundColor('#ffffff') 
                    .margin(10) 
                } 
              }) 
            } 
          } 
        }) 
      } 
      .width('80%') 
      .backgroundColor('#fffff0') 
      .listDirection(Axis.Vertical) 
      .onScrollIndex((firstIndex: number, lastIndex: number) => { 
        this.flag = firstIndex // 刷新 AlphabetIndexer 
      }) 
 
      AlphabetIndexer({ arrayValue: this.value, selected: this.flag }) 
        .width("20%") 
        .font({ size: 20, weight: FontWeight.Bold }) 
        .selectedColor(Color.Blue) 
        .selectedBackgroundColor(0xCCCCCC) 
        .usingPopup(true)// 是否显示弹出框 
        .selectedFont({ size: 28, weight: FontWeight.Bolder }) 
        .itemSize(30) 
        .alignStyle(IndexerAlign.Left) 
        .onSelect((index: number) => { 
          console.info(`AlphabetIndexer 选中了 ${this.value[index]}`) 
          for (let i = 0; i < this.contacts.length; i++) { 
            if (this.contacts[i].index.toString() === this.value[index]) { 
              this.preIndex = index; 
              this.scroller.scrollToIndex(i); 
              return; 
            } 
          } 
          this.flag = this.preIndex; 
        }) 
    }.width("100%") 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 18:14:03
相关问题
如何跳转通讯录 、 打电话
664浏览 • 1回复 待解决
建议开发使用什么单位
789浏览 • 1回复 待解决
通过emitter实现worker间线程通讯
433浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
527浏览 • 1回复 待解决
使用Grid 组件实现选座场景
380浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
185浏览 • 1回复 待解决
使用web组件实现预览沙箱中pdf
685浏览 • 1回复 待解决
如何截屏、屏、投屏
477浏览 • 1回复 待解决
HarmonyOS物联网串口通讯
9668浏览 • 1回复 待解决
多模块开发的方案建议
747浏览 • 1回复 待解决
基于tabs实现页面布局
201浏览 • 1回复 待解决