本文详细介绍了在Flutter中实现类似抖音、豆瓣等应用的评论弹窗功能所遇到的挑战，包括手势交互、列表滚动联动、键盘弹起定位等问题，并提供了相应的解决方案，如自定义PanelController扩展滑动面板功能，处理多个列表的手势冲突，以及解决键盘弹起时的定位问题。文章还探讨了iOS和部分Android设备上的侧滑手势与下拉手势冲突，并给出了相应优化策略。
最近用flutter做了一个评论弹窗的功能，本来以为很简单的烂大街的一个功能，结果却遇到了不少的问题，而且这些问题我觉得很有意义，以至于我觉得我如果分享出来可能会对其他人很有帮助。
要做一件事情可能会很容易，但做好一件事情却很难~
常见产品
粗略的截了一些图：抖音、豆瓣、知乎、番茄小说
这些产品的评论功能基本都是这种弹窗或者说是滑动面板的模式：
抖音/豆瓣
知乎/番茄小说
交互细节
当认真的体验了这几款产品后，发现有这些特点：
| 列表与下拉手势联动 | 面板顶部下拉手势 | 查看更多回复 | 弹起键盘 | |
|---|---|---|---|---|
| 抖音 | 支持 | 支持 | 点击展开 | 滚动定位 |
| 豆瓣 | 支持 | 支持 | 点击展开 | 评论框顶部显示内容 |
| 知乎 | 支持 | 不支持 | 跳转新页面 | 无处理 |
| 番茄小说 | 支持 | 支持 | 跳转新页面 | 滚动定位 |
大概梳理总结这么几点：
- 这个弹窗并不是一个简单的dialog，其实是一个带有手势交互的滑动面板
- 手势向上可以正常滑动列表，手势向下滑动列表到顶部后可触发下拉手势关闭弹窗
- 即使列表向上滚动一段距离后，仍然可以滑动顶部触发下拉手势关闭弹窗
- 点击列表某一项弹起键盘后，普遍是将要回复的那一条定位到评论框的上方
- 查看更多回复，抖音/豆瓣是直接在当前页面展开，知乎/番茄小说是一个跳转到新页面
我相信这几款产品基本都是用android原生去写的，那么flutter是否实现和它们一样的用户体验呢?
其实我最初想到的就是用showModalBottomSheet去从底部弹一个窗出来，但是BottomSheet本身并没有处理与列表的滑动交互问题，如果凑合着其实也还行，就是缺少了下拉手势的交互。
所以我在flutter社区找到了sliding_up_panel，这是一个很受欢迎的库，我打算基于这个库来实现评论功能
至于实现效果，最终是选择了番茄小说的交互效果：
| 列表与下拉手势联动 | 面板顶部下拉手势 | 查看更多回复 | 弹起键盘 | |
|---|---|---|---|---|
| 番茄小说 | 支持 | 支持 | 跳转新页面 | 滚动定位 |
实现效果
那些基本的代码就不细讲了，一顿操作下来，基本功能成型：
接下来说的难点解决暂时也不贴具体的源码了，以讲思路为主，部分是真实的，部分是伪代码
最终的源码我会贴到文章末尾~
难点解决
1. 面板中存在多个列表时，下拉手势异常(局部路由存在多个页面引起)
看一下官方文档的说明：
| Properties | Description |
|---|---|
| panelBuilder [beta] | NOTE: This feature is still in beta and may have some problems. Please open an issue on GitHub if you encounter something unexpected.Provides a ScrollController to attach to a scrollable object in the panel that links the panel position with the scroll position. Useful for implementing an infinite scroll behavior. If panel and p |
最低0.47元/天 解锁文章
扫一扫
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
