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

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

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

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

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。

回到顶部