社区编辑申请
注册/登录
ArkUI(TS)声明式开发:列表字母索引导航
系统 OpenHarmony
前段时间SDK版本更新了,看了更新介绍,ArkUI(TS)主要是新增了文本输入组件。更新版本后研究一下,发现有些组件也有所更新和优化。所以就想写这个项目。

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://ost.51cto.com​

前言

前段时间SDK版本更新了,看了更新介绍,ArkUI(TS)主要是新增了文本输入组件。更新版本后研究一下,发现有些组件也有所更新和优化。所以就想写这个项目。

项目说明

本项目界面搭建基于ArkUI中TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:​​基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2​​。

  • 工具版本:DevEco Studio 3.0 Beta2。
  • SDK版本:3.0.0.1(API Version 7 Beta2)。

主要知识点

​列表容器(List):​​本次更新加入了Scroller,可以控制列表的跳转位置。

​循环渲染( ForEach ):​​本次更新修复了index不能使用的问题。

​字母索引条(AlphabetIndexer)​​。

效果演示

1、字母索引导航到列表对应位置,2、列表滑动时也同步定位到字母索引处。

实现思路

1、布局主要结构。

// 堆叠容器,方向居右
Stack({ alignContent: Alignment.End }) {
// 列表布局
Column() {
List() {
......
}
}.width('100%')
.height('100%')

// 字母索引导航
AlphabetIndexer()
}

2、列表数据格式。

[
{ name: '周杰伦', headerWord: 'Z' },
{ name: '林俊杰', headerWord: 'L' },
{ name: '陈奕迅', headerWord: 'C' },
{ name: '薛之谦', headerWord: 'X' },
......
]

3、列表布局。

这块需要注意的是,分组效果:相同字母只显示一个就行。

// 列表数据
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)
}
}
// 联系人内容布局
this.ContactsContentLayout(item)
}
}
}, (item, index) => index.toString())
}

4、字母索引导航。

(1)获取列表中字母和索引的对应的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)根据字母索引组件选中回调事件,获取字母对应的索引,进行跳转就行。

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) => {// 选中事件回调
// 选中的字母
const alphabet = this.alphabets[index]
// 查询字母在列表中的索引
const selectedIndex = this.mapAlphabetsIndex.get(alphabet);
// 跳转到指定索引位置
this.scroller.scrollToIndex(selectedIndex)
})

5、列表滑动选中字母。

List({ scroller: this.scroller }) {
......
}
.onScrollIndex((start, end) => {
// 监听滑动时顶部的索引,查询对应的数据
const element = this.listContacts[start]
// 更新选中的字母索引
this.selectedIndex = this.alphabets.indexOf(element.headerWord)
})

项目地址

项目加了个汉字转拼音的工具类。

https://gitee.com/liangdidi/AlphabetIndexerDemo.git(需要登录才能看到演示图)

总结

此项目经典的使用场景就是联系人,实现过程需要注意:

  • 数据源使用拼音工具类获取大写首字母,并进行列表排序。
  • 字母布局的显示条件,相同字母只显示一个。
  • 首字母与其索引初始化时存入map中,AlphabetIndexer组件在onSelected回调中获取字母对应的索引,滑动到指定的列表位置。
  • List组件在onScrollIndex回调中监听滑动到当前顶部的索引,更新选中的字母索引。

每天进步一点点、需要付出努力亿点点。

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://ost.51cto.com​

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-06-23 09:22:57

Vue技巧前端

2022-06-13 07:36:06

2022-06-15 16:16:21

分布式数据库鸿蒙

2022-06-20 18:10:49

盛业ESG

2022-05-24 13:08:55

GNOMEKDELinux

2022-05-30 16:57:44

TypeScriptTS前端

2022-01-25 17:05:44

2022-05-31 08:04:23

2022-06-01 17:30:06

UbuntuKVM虚拟化

2022-05-11 10:43:02

美团数据库优化

2022-05-05 09:02:24

Go函数调用栈

2022-01-07 09:56:16

2022-05-30 07:36:54

vmstoragevmselect

2022-04-20 11:03:28

Linux内存管理

2022-04-13 11:24:18

ETS开发HarmonyOS鸿蒙

2022-03-24 23:06:25

大数据技术应用

2022-04-23 16:36:30

Linux密码

2022-04-07 16:03:36

JavaScriptTypeScript

2022-04-15 11:30:59

代码,Python保存视频

2022-04-12 14:43:26

Python字典数据

同话题下的热门内容

OHOS构建自定义服务实战啃论文俱乐部—数据密集型应用内存压缩HarmonyOS - 自定义组件之计时器基于OpenHarmony3.1的购物车应用的实现HarmonyOS - 方舟开发框架ArkUI 流光按钮效果OpenHarmony3.1-Ace-Formcomponent源码解析HarmonyOS手机遥控Dayu开发板相机(一)华为智慧屏分布式语音音乐软件,可见即可说

编辑推荐

HarmonyOS 2.0鸿蒙第二期开发者Beta公测申请指南HarmonyOS LYEVK-3861开发板播放《蜜雪冰城》鸿蒙HarmonyOS分布式软总线:构建低时延、高带宽的多设备虚拟网络华为HarmonyOS的强势突围: 直面物联网迷宫的蓄力进击鸿蒙HarmonyOS2.0发布会现场回忆录
我收藏的内容
点赞
收藏

51CTO技术栈公众号