HarmonyOS 鸿蒙Next：怎么做一个城市列表右边根据拼音首字母的索引排列（A-Z），点击索引跳到具体的行

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：怎么做一个城市列表右边根据拼音首字母的索引排列（A-Z），点击索引跳到具体的行

需要实现一个功能，是一个城市列表，右边从上到下排列城市的首拼音A-Z 点击拼音的字母跳到具体那行

Harmonyos Next教程
8 回复 
[@Builder](/user/Builder)
contentView() {
  Stack({ alignContent: Alignment.End }) {
    List({ scroller: this.scroller }) {
      ForEach(this.value, (val: string, section: number) => {
        ListItemGroup({ header: this.itemHeader(val) }) {
          ForEach(this.citys, (city: string, itemIndex: number) => {
            ListItem() {
              Row() {
                Text(`${city}  第 ${section + 1} 个group中第${itemIndex + 1} 个item`)
                  .fontColor($r('[common].color.color_333'))
                  .fontSize(12)
                  .padding(12)
              }.width('100%')
              .height(40)
            }
          })
        }
      })
    }.width('100%')
    .layoutWeight(1)
    .onScrollIndex((startIndex) => {
      this.scrollIndex = startIndex
    })
    .sticky(StickyStyle.Header)

    AlphabetIndexer({ arrayValue: this.value, selected: 0 })
      .selected(this.scrollIndex + 1)
      .itemSize(20)
      .margin({ right: 20 })
      .onSelect((index) => {
        this.scroller.scrollToIndex(index)
      })
  }
}

官网源码

const alphabets = ['#', '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'];
[@Entry](/user/Entry)
[@Component](/user/Component)
struct ContactsList {
  [@State](/user/State) selectedIndex: number = 0;
  private listScroller: Scroller = new Scroller();

  build() {
    Stack({ alignContent: Alignment.End }) {
      List({ scroller: this.listScroller }) {}
      .onScrollIndex((firstIndex: number) => {
        // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
      })

      // 字母表索引组件
      AlphabetIndexer({ arrayValue: alphabets, selected: 0 })
        .selected(this.selectedIndex)
    }
  }
}
很简单啊，十几条代码就搞定了

List  + AlphabetIndexer

官网也有文档的

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-list-0000001860175933

（响应滚动位置）

你给的文档看不了啊（doge）

你没权限么 0 0 我给你的Pre2的文档地址，好像不能发你截图了，我重新发你回复，~~上传个截图，你参考我这个目录自己查查咯 不过结构还是List + AlphabetIndexer

~~不能发截图的，有xxxx协议的，你看我的给你发的代码好了

在HarmonyOS鸿蒙Next中，实现城市列表右边根据拼音首字母索引排列（A-Z），并点击索引跳到具体行，可以通过以下步骤实现：

  1. 数据预处理：首先，对城市列表进行预处理，提取每个城市的拼音首字母，并根据首字母对城市进行分组和排序。可以使用第三方库如Pinyin4j来获取拼音首字母。

  2. UI布局：设计UI布局，包括城市列表和右侧的索引栏。索引栏可以使用ScrollView或RecyclerView来展示A-Z的索引。

  3. 索引栏点击事件：为索引栏的每个字母设置点击事件监听器。当点击某个字母时，计算该字母对应的城市在列表中的位置，并使用ListView或RecyclerView的smoothScrollToPosition方法平滑滚动到该位置。

  4. 优化体验：为了提高用户体验，可以在滚动到指定位置时，对列表项进行高亮显示或短暂停留，以便用户更容易找到目标城市。

通过上述步骤，你可以在HarmonyOS鸿蒙Next中实现城市列表的拼音首字母索引排列及点击索引跳转功能。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部