使用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%") 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.