HarmonyOS ArkUI之聊天列表滑动删除(TS) 原创 精华
中软HOS小鸿
发布于 2021-11-25 14:14
浏览
9收藏
作者:梁青松
简介
本项目基于ArkUI中TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:
基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2
本文介绍列表滑动删除:
-
列表中只允许滑出其中一项
-
如果有打开的项,点击或滑动其他项都会关闭打开的项
-
点击删除,刷新列表界面
ArKUI系列文章
效果演示
主要知识点
可滑动的容器组件(Scroll)、触摸事件(onTouch)
实现思路
我把界面精简了一下,减少代码量,帮助更好的理解主要逻辑。
1、item布局
主要使用scroll包裹内容,scroll设置为横向滑动(部分代码)
2、Scroll容器
给Scroll容器绑定滑动组件的控制器,只用到其中的一个方法:滑动到指定位置 scrollTo
看源码得知可以设置动画时间,注意:时间目前好像不能设置300毫秒以上,往下设置可以 (部分代码)
3、设置触摸事件
根据移动的偏移量,判断大于删除布局宽度的一半则:打开删除布局(部分代码)
4、使用列表加载
需要主要的点:
- 需要给每个item绑定控制器,这样才能控制对应的item打开或关闭
- 打开的item记录一下数据,点击内容或删除、滑动其他item:如果有带打开的item,进行关闭
以下是完整代码,可直接粘贴运行使用。
结尾
因为ArkUI声明式开发,是鸿蒙新出的东西,API还不是那么完善,后续跟进官网更新。以下是需要优化点:
- ArkUI中的TS没有JS中的新出的插槽概念,要不然直接封装成组件,提供两个对外的接口,一个传入内容布局、一个操作布局,就像Android的组件库一样,使用者不需要知道内部实现。
每天进步一点点、需要付出努力亿点点。
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-11-25 15:13:23修改
赞
9
收藏 9
回复
9
4
9
相关推荐
在认识楼主之前,真没想到聊天功能有这么多细节。
哈哈哈,把所有的内容组装在一起可以做很多事情了
好帖子,支持
感谢分享ArkUI相关内容,据说12月中旬会更新一波,不知道大佬知不知道会更新什么内容?