概览
之前工作中有一个双列表联动的业务,如下图所示, 当时是RecycleView进行处理的,计算第一个显示的item,然后控制内容列表滑动, 监听内容列表滑动,选中滑动对应的title列表
今天学习使用Compose来如何处理, 看看有什么差别
设计思考
- 左边title列表怎么设计? 使用什么组件,如何摆放, 选中状态如何更新?
- 右边内容列表包含标题, 标题下面又有复数的选项,组件要如何摆放?
- 左边title列表选中时, 怎么滑动更新右边的内容列表
- 右边的内容列表滑动时,要怎么更新左边title列表的选中状态
- 右边选中后,内容在滑动的同时,触摸右边内容列表滑动时该如何处理
设计思路
- 组件设计
- 通过设置LazyColum的state字段,可以控制列表的滚动,以及滚动位置的获取
- 声明一个leftSelectIndex的字段,两个列表同意更新这个字段, 来进行滑动联动
- 为了滑动数据流向更加清晰, 不是直接在点击事件或者监听滑动时直接更新leftSelectIndex字段,设计了一个滑动事件的类, 然后将不同的事件包装为这个对象, 发送给数据流,统一进行管理
- 如何监听右边内容列表的滑动位置
- 在滑动数据流中通过防抖, 拦截控制滑动状态
开发中遇到的问题
- LazyColumn中嵌套Column再嵌套Column时, 会报错:java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. 无限高度的问题,需要注意这种写法
- LaunchedEffect的使用, 在读取key时,才启动协程执行任务, 在可以被丢弃时,及时停止任务,管理了key的生命周期, 避免不必要的资源浪费
总结
Compose声明式开发UI的方式,相比通过XML布局的方式, 更加简洁,管理维护更加方便
欢迎讨论交流!
