Flutter中由于滑动冲突导致BottomSheet中含有Listview等滚动组件时下拉效果失效问题

场景

在社交类软件中，经常都会有类似抖音这种显示弹出框的场景,用来显示一段评论列表。↓

底部评论弹框.png

在flutter里面，有一个交互效果非常不错的原生组件：BottomSheet,自带入场出场动画以及下拉退出动画效果，所以毫无疑问使用这个控件是非常好的选择，可是当使用起来会发现，如果BoottomSheet中的子组件是可滚动类型的child时，会因为滑动冲突问题导致下拉退出功能失效，一旦无法实现下拉退出效果，在用户体验上是非常不好的，这个组件也显得比较鸡肋，那么该如何在它的基础上实现下拉效果呢？

思路

我们从BottomSheet的源码看，内部其实是通过获取用户的滑动距离配合AnimationBuilder实现的动态改变弹框高度，从而实现的上拉下拉的动画效果。

image.png

而当包含Listview时，由于Listview的本身滑动机制使得BottomSheet内部的触摸事件无法传递所致，所以从这里入手我们直接自己来处理整个用户的触摸手势，当listview在顶部时手势响应下拉动画，当listview不在顶部时则继续响应listview本身的滑动效果即可。
所以这里会涉及到如下组件：

• Listener：用于监听用户的手势，获取手指按下的位置、滑动的距离、离开屏幕的时机。
• AnimationContainer：动态的改变弹框高度，从而达到高度随着手势变化的下拉动画效果。
• StreamBuilder：通过不断的接收手势事件来改变弹框的高度。

实现

部分代码如下，完整代码在文末

/// 用来发送事件 改变弹框高度的stream
StreamController _streamController = StreamController.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: [

      ],
    ),
  ),
)

关键点

1. 当listview本身没有滑动到顶部时还要继续响应listview的滑动效果，是否在顶部的判断条件是_scrollController.offset != 0

// 触摸事件过程 手指一直在屏幕上且发生距离滑动 
if(_scrollController.offset != 0){ 
    // 只有列表滚动到顶部时才触发下拉动画效果 
    print("onPointerMove:${_scrollController.offset}"); 
    return; 
}

2. 获取手指滑动的纵向距离，弹框的动态高度=弹框的最大高度-手指滑动的距离

double distance = event.position.dy - _pointerDy;
if (distance.abs() > 0) {
  // 获取手指滑动的距离，计算弹框实时高度，并发送事件
  double _currentHeight = _totalHeight - distance;
  if(_currentHeight > _totalHeight){
    return;
  }
  _streamController.sink.add(_currentHeight);
}

3. 在获取手指离开屏幕的方法中，有两种情况，一种是滑动距离不够，弹框要回到最大高度，一种是滑动距离足够，这时将弹框pop掉即可，注意这里pop掉是会响应BottomSheet的退出动画，所以无需在做特殊处理。

onPointerUp: (event){
  // 触摸事件结束 手指离开屏幕
  // 这里认为滑动超过一半就认为用户要退出了，值可以根据实际体验修改
  if(currentHeight < (_totalHeight * 0.5)){
    Navigator.pop(context);
  }else{
    _streamController.sink.add(_totalHeight);
  }
},

4. 当动画效果发生时，也就是弹框的高度不是最大高度时，这里要将listview的滑动效果禁止掉，否则在手指上下滑动弹框整体时会有listview的鬼畜响应效果，弹框高度恢复时也同步恢复listview的滑动响应。

physics: currentHeight != _totalHeight ? NeverScrollableScrollPhysics() : ClampingScrollPhysics(),

效果

bottom_sheet.gif

总结

• 通过这个问题还是意识到一定要多看源码、多看源码、多看源码，往往看似比较困难的问题通常在懂得原理后也就迎刃而解。
• 频繁的通过stream发送事件不是此方法的最优解，只要思路正确，配合上Flutter本身的多种多样的组件其实是有很多解决方案的。或许你有更好的思路也不妨交流下~

完整代码

代码地址

掘金主页

主页