ArkUI（TS）聲明式開發(fā)：列表字母索引導航
作者：梁青松
前段時間SDK版本更新了，看了更新介紹，ArkUI（TS）主要是新增了文本輸入組件。更新版本后研究一下，發(fā)現(xiàn)有些組件也有所更新和優(yōu)化。所以就想寫這個項目。
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
前言
前段時間SDK版本更新了，看了更新介紹，ArkUI(TS)主要是新增了文本輸入組件。更新版本后研究一下，發(fā)現(xiàn)有些組件也有所更新和優(yōu)化。所以就想寫這個項目。
項目說明
本項目界面搭建基于ArkUI中TS擴展的聲明式開發(fā)范式，關(guān)于語法和概念直接看官網(wǎng)官方文檔地址：??基于TS擴展的聲明式開發(fā)范式1、基于TS擴展的聲明式開發(fā)范式2??。
- 工具版本：DevEco Studio 3.0 Beta2。
- SDK版本：3.0.0.1(API Version 7 Beta2)。
主要知識點
??列表容器(List)：??本次更新加入了Scroller，可以控制列表的跳轉(zhuǎn)位置。
??循環(huán)渲染( ForEach )：??本次更新修復(fù)了index不能使用的問題。
效果演示
1、字母索引導航到列表對應(yīng)位置，2、列表滑動時也同步定位到字母索引處。
實現(xiàn)思路
1、布局主要結(jié)構(gòu)。
// 堆疊容器，方向居右
Stack({ alignContent: Alignment.End }) {
// 列表布局
Column() {
List() {
}
}.width('100%')
.height('100%')
// 字母索引導航
AlphabetIndexer()
}
2、列表數(shù)據(jù)格式。
[
{ name: '周杰倫', headerWord: 'Z' },
{ name: '林俊杰', headerWord: 'L' },
{ name: '陳奕迅', headerWord: 'C' },
{ name: '薛之謙', headerWord: 'X' },
]
3、列表布局。
這塊需要注意的是，分組效果：相同字母只顯示一個就行。
// 列表數(shù)據(jù)
private listContacts: Array<Contacts> = getContactsList()
// 滾動控制器
private scroller: Scroller = new Scroller()
List({ scroller: this.scroller }) {
ForEach(this.listContacts, (item: Contacts, index) => {
ListItem() {
Column() {
// 字母布局
if (index == 0) {
// 第一個肯定要顯示
this.HeaderWord(item)
} else {
// 當前字母和前一個不一樣就顯示
if (item.headerWord != this.listContacts[index-1].headerWord) {
this.HeaderWord(item)
}
}
// 聯(lián)系人內(nèi)容布局
this.ContactsContentLayout(item)
}
}
}, (item, index) => index.toString())
}
4、字母索引導航。
（1）獲取列表中字母和索引的對應(yīng)的map集合，和列表字母布局顯示條件是相同的。
let mapAlphabetsIndex: Map<string, number> = new Map()
for (var i = 0; i < list.length; i++) {
const element = list[i];
// 第一個肯定要添加到map中
if (i == 0) {
mapAlphabetsIndex.set(element.headerWord,i)
} else {
// 當前字母和前一個不一樣，添加到map中
if (element.headerWord != list[i-1].headerWord) {
mapAlphabetsIndex.set(element.headerWord,i)
}
}
}
（2）根據(jù)字母索引組件選中回調(diào)事件，獲取字母對應(yīng)的索引，進行跳轉(zhuǎn)就行。
private alphabets: string[] = ['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']
@State private selectedIndex: number = 0
// 字母索引導航
AlphabetIndexer({ arrayValue: this.alphabets, selected: this.selectedIndex })
.onSelected((index: number) => {// 選中事件回調(diào)
// 選中的字母
const alphabet = this.alphabets[index]
// 查詢字母在列表中的索引
const selectedIndex = this.mapAlphabetsIndex.get(alphabet);
// 跳轉(zhuǎn)到指定索引位置
this.scroller.scrollToIndex(selectedIndex)
})
5、列表滑動選中字母。
List({ scroller: this.scroller }) {
}
.onScrollIndex((start, end) => {
// 監(jiān)聽滑動時頂部的索引，查詢對應(yīng)的數(shù)據(jù)
const element = this.listContacts[start]
// 更新選中的字母索引
this.selectedIndex = this.alphabets.indexOf(element.headerWord)
})
項目地址
項目加了個漢字轉(zhuǎn)拼音的工具類。
https://gitee.com/liangdidi/AlphabetIndexerDemo.git(需要登錄才能看到演示圖)
總結(jié)
此項目經(jīng)典的使用場景就是聯(lián)系人，實現(xiàn)過程需要注意：
- 數(shù)據(jù)源使用拼音工具類獲取大寫首字母，并進行列表排序。
- 字母布局的顯示條件，相同字母只顯示一個。
- 首字母與其索引初始化時存入map中，AlphabetIndexer組件在onSelected回調(diào)中獲取字母對應(yīng)的索引，滑動到指定的列表位置。
- List組件在onScrollIndex回調(diào)中監(jiān)聽滑動到當前頂部的索引，更新選中的字母索引。
每天進步一點點、需要付出努力億點點。
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
責任編輯：jianghua
來源：
鴻蒙社區(qū)
