相关问题
分组列表最佳实践,希望提供一个完善的分组列表最佳实践。
1014浏览 • 1回复 待解决
HarmonyOS 列表分组可折叠和展开
416浏览 • 1回复 待解决
如何设置分组列表的圆角和间距
1936浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
1291浏览 • 1回复 待解决
如何实现分组列表的吸顶/吸底效果
2263浏览 • 1回复 待解决
如何使用ListItemGroupStyle设置分组列表的圆角和间距
468浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现鸿蒙底部面板嵌套列表滑动效果?
110浏览 • 1回复 待解决
HarmonyOS 装饰器嵌套二级,列表item控件显示没有联动
33浏览 • 1回复 待解决
HarmonyOS 根据列表的title,刷新列表的数据
74浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何通过LazyForEach提升鸿蒙底部面板嵌套列表的性能?
94浏览 • 1回复 待解决
List列表 编辑问题,List列表如何开启拖动功能。
893浏览 • 1回复 待解决
HarmonyOS RN三方库列表对应CAPI库列表
503浏览 • 1回复 待解决
实现拖动列表排序,其他列表自动排序的效果思路
744浏览 • 1回复 待解决
HarmonyOS 聊天列表组件
21浏览 • 1回复 待解决
HarmonyOS 滚动列表问题
44浏览 • 1回复 待解决
HarmonyOS 滚动列表问题?
170浏览 • 0回复 待解决
HarmonyOS 列表联动交互
53浏览 • 1回复 待解决
HarmonyOS 列表选择问题
9浏览 • 1回复 待解决
HarmonyOS 列表实现方案
66浏览 • 1回复 待解决
#鸿蒙通关秘籍# 在HarmonyOS项目中如何使用LazyForEach优化Panel内嵌套列表的性能?
117浏览 • 0回复 待解决
HarmonyOS list 列表项交换
46浏览 • 1回复 待解决
HarmonyOS 列表刷新问题
659浏览 • 1回复 待解决
HarmonyOS 相机切到任务列表后如何监听相机处于任务列表呢
434浏览 • 1回复 待解决
HarmonyOS 视频列表播放问题
69浏览 • 1回复 待解决
HarmonyOS 按钮下拉列表弹窗
149浏览 • 1回复 待解决
需要支持如下功能点:
1. 分组列表组件
2. 每个独立条目上有复杂布局,特别是输入框、选择按钮等比较难处理的焦点事件等
3. 侧滑删除功能
4. 可以拖拽条目效果
5. 子条目数据会引起列表部分数据或者整体数据的属性更新。
这里总结一个完善的分组列表实践案例,当前实现功能点如下:
暂未实现功能:
这个功能需要用到@Observed和@ObjectLink修饰,因为数据嵌套的问题,层级多了以后比较复杂暂未实现,等后续深度监听需求落地后更新
使用的核心API
核心代码解释
数据懒加载DataSource的封装
lazyForEach的实现需要实现IDataSource类,这里使用TS泛型对齐进行一个简单的封装。
MyDataSource实现自己的DataSource具体实现
同样是使用TS泛型来实现,因为后期会有嵌套列表且都需要使用懒加载的场景,这里的类型不能写成定值。
同时在这里也定义了具体的数据类TimeTable,因为是对象数组,这里我们需要监听title与projects的变化。所以需要使用@Observed来修饰。
以上一个简单的数据封装就实现了,下面我们来看下组件层面的实现。
嵌套列表数据懒加载功能
Index.ets
这里因为我们需要懒加载功能所以需要new MyDataSource并且指定其类型为TimeTable这是我们的第一层列表,主要是遍历第一层数据讲所有子表全部渲染出来,主要使用还要看嵌套的第二层列表。
第二层ChildList实现如下:
因为需要涉及到对象数组的数据更新所以我们需要定义如下参数,由于第二次数据也有列表,并且也需要支持懒加载,所以在第二层我们也需要new MyDataSource这一层的类型就是对应的子表数据类型了,这里只嵌套了两层就直接指定为string了。
在组件创建的时候就可以讲上层传进来的数据在aboutToAppear生命周期中初始化。
请注意这里需要使用MyDataSource的新增数据方法来初始化,否则后续无法支持懒加载。
其他实现与第一层一致,也是套一层List然后lazyForEach遍历渲染即可。
收起展开功能
该功能主要在子列表中实现,主要思路就是改变子列表项高度来实现,核心代码如下:
子表新增与侧滑删除功能
新增没什么好说的因为子列表已经实现了数据懒加载,在懒加载中直接pushData或者addData即可,侧滑删除侧是调用了ListItem组件的swipeAction属性来实现,实现代码如下:
需要注意的是,现在所有的数据操作都需要使用DataSource中的接口来操作。
跨分组拖拽条目功能
最新的API中已经取消editMode属性,所以拖拽只要在列表中监听onItemDragStart事件即可开启拖拽功能,同时我们还需要监听onItemDrop让每个子列表都是可以放置的目标,在拖拽放置的时候onItemDrop会拿到两个索引itemIndex——拖拽起始位置,和insertIndex——拖拽插入位置,当我们放置目标的时候人如果不属于该子列表的元素itemIndex会返回-1,所以我们可以在onItemDragStart中将我们拖拽这一项的数据缓存在AppStroge中,放置目标的时候若itemIndex为-1则表示当前这一项不来自自己这个子列表,就吧他pushData进入该子列表即可,同时放置完成后原列表要判断insertIndex是否为-1,若是泽说明拖出去了,那么在源列表中deleteData,代码如下所示:
ChildList完整实现代码如下:
适配的版本信息
IDE版本:DevEco Studio 4.1.1.300
SDK版本:4.1.3.5