场景
在社交类软件中，经常都会有类似抖音这种显示弹出框的场景,用来显示一段评论列表。↓
底部评论弹框.png
在flutter里面，有一个交互效果非常不错的原生组件：BottomSheet,自带入场出场动画以及下拉退出动画效果，所以毫无疑问使用这个控件是非常好的选择，可是当使用起来会发现，如果BoottomSheet中的子组件是可滚动类型的child时，会因为滑动冲突问题导致下拉退出功能失效，一旦无法实现下拉退出效果，在用户体验上是非常不好的，这个组件也显得比较鸡肋，那么该如何在它的基础上实现下拉效果呢？
思路
我们从BottomSheet的源码看，内部其实是通过获取用户的滑动距离配合AnimationBuilder实现的动态改变弹框高度，从而实现的上拉下拉的动画效果。
image.png
而当包含Listview时，由于Listview的本身滑动机制使得BottomSheet内部的触摸事件无法传递所致，所以从这里入手我们直接自己来处理整个用户的触摸手势，当listview在顶部时手势响应下拉动画，当listview不在顶部时则继续响应listview本身的滑动效果即可。
所以这里会涉及到如下组件：
- Listener：用于监听用户的手势，获取手指按下的位置、滑动的距离、离开屏幕的时机。
- AnimationContainer：动态的改变弹框高度，从而达到高度随着手势变化的下拉动画效果。
- StreamBuilder：通过不断的接收手势事件来改变弹框的高度。
实现
部分代码如下，完整代码在文末
/// 用来发送事件 改变弹框高度的stream
StreamController<double> _streamController = StreamController<double>.broadcast();
/// 列表弹起的正常高度
double _totalHeight = 400;
/// 记录手指按下的位置
double _pointerDy = 0;
AnimatedContainer(
duration: Duration(milliseconds: 30),
height: currentHeight,
child: Listener(
onPointerMove: (event){
// 触摸事件过程 手指一直在屏幕上且发生距离滑动
if(_scrollController.offset != 0){
// 只有列表滚动到顶部时才触发下拉动画效果
print("onPointerMove:${_scrollController.offset}");
return;
}
double distance = event.position.dy - _pointerDy;
if (distance.abs() > 0) {
// 获取手指滑动的距离，计算弹框实时高度，并发送事件
double _currentHeight = _totalHeight - distance;
if(_currentHeight > _totalHeight){
return;
}
_streamController.sink.add(_currentHeight);
}
},
onPointerUp: (event){
// 触摸事件结束 手指离开屏幕
// 这里认为滑动超过一半就认为用户要退出了，值可以根据实际体验修改
if(currentHeight < (_totalHeight * 0.5)){
Navigator.pop(context);
}else{
_streamController.sink.add(_totalHeight);
}
},
onPointerDown: (event){
// 触摸事件开始 手指开始接触屏幕
_pointerDy = event.position.dy + _scrollController.offset;
},
child: ListView(
controller: _scrollController,
physics: currentHeight != _totalHeight ? NeverScrollableScrollPhysics() : ClampingScrollPhysics(),
children: [
],
),
),
)
关键点
- 当listview本身没有滑动到顶部时还要继续响应listview的滑动效果，是否在顶部的判断条件是_scrollController.offset != 0
// 触摸事件过程 手指一直在屏幕上且发生距离滑动
if(_scrollController.offset != 0){
// 只有列表滚动到顶部时才触发下拉动画效果
print("onPointerMove:${_scrollController.offset}");
return;
}
- 获取手指滑动的纵向距离，弹框的动态高度=弹框的最大高度-手指滑动的距离
double distance = event.position.dy - _pointerDy;
if (distance.abs() > 0) {
// 获取手指滑动的距离，计算弹框实时高度，并发送事件
double _currentHeight = _totalHeight - distance;
if(_currentHeight > _totalHeight){
return;
}
_streamController.sink.add(_currentHeight);
}
- 在获取手指离开屏幕的方法中，有两种情况，一种是滑动距离不够，弹框要回到最大高度，一种是滑动距离足够，这时将弹框pop掉即可，注意这里pop掉是会响应BottomSheet的退出动画，所以无需在做特殊处理。
onPointerUp: (event){
// 触摸事件结束 手指离开屏幕
// 这里认为滑动超过一半就认为用户要退出了，值可以根据实际体验修改
if(currentHeight < (_totalHeight * 0.5)){
Navigator.pop(context);
}else{
_streamController.sink.add(_totalHeight);
}
},
- 当动画效果发生时，也就是弹框的高度不是最大高度时，这里要将listview的滑动效果禁止掉，否则在手指上下滑动弹框整体时会有listview的鬼畜响应效果，弹框高度恢复时也同步恢复listview的滑动响应。
physics: currentHeight != _totalHeight ? NeverScrollableScrollPhysics() : ClampingScrollPhysics(),
效果
bottom_sheet.gif
总结
- 通过这个问题还是意识到一定要多看源码、多看源码、多看源码，往往看似比较困难的问题通常在懂得原理后也就迎刃而解。
- 频繁的通过stream发送事件不是此方法的最优解，只要思路正确，配合上Flutter本身的多种多样的组件其实是有很多解决方案的。或许你有更好的思路也不妨交流下~
