flutter在包含ListVIew的滚动列表页面中监听手势:NotificationListener

列表控件内部页有监听事件,使用GestureDetector监听有冲突,所以使用NotificationListener。

示例中增加了Listener监听手指滑动方向

dart 复制代码
//手指的偏移量
  double _startDx = 0.0;
  double _endDx = 0.0;
  double _dy = 0.0;
  //标签栏高度
  double _tabBarHeight = 80.w;
  //标签栏刷新事件
  late StateSetter _setTabBarState;
  //偏移阈值
  double _listerOffsetThreshold = 40.0;

_body() {
    return NotificationListener<ScrollNotification>(
        onNotification: (dynamic scrollNotification) {
          if (scrollNotification is ScrollUpdateNotification &&
              scrollNotification.depth == 0) {
            // 滚动且是列表滚动的时候
            //  print('滑动偏移量:${scrollNotification.metrics.pixels}');
          }
          return true;
        },
      child: Listener(
          onPointerDown: (downPointer){
            _startDx = downPointer.position.dx;
            _dy = downPointer.position.dy;
          },
          onPointerMove: _onPointerMove,
          onPointerUp: _onPointerUp,
        child: Column(
          children: [
            // 头部分类列表
            _userShareTabBar(),
            // 推享文章列表
            Expand(
            child: ListView.builder(
            /// 列表
            )
            ),
          ],
        )
      )
    );
  }

_onPointerMove(PointerMoveEvent movePointer){
    //向下滑动。
    if (movePointer.position.dy - _dy > 0) {
      if (movePointer.position.dy - _dy > _listerOffsetThreshold) {
        print('向下滑动');
        _setTabBarState((){
          _tabBarHeight = 80.w;
        });
      }
    } else {
      if (-(movePointer.position.dy - _dy) > _listerOffsetThreshold) {
        print('向上滑动');
        _setTabBarState((){
          _tabBarHeight = 0.0;
        });
      }
    }
  }

  _onPointerUp(PointerUpEvent upPointer){
    _endDx = upPointer.position.dx;
    //向下滑动
    if (upPointer.position.dy - _dy > 0) {
      if (upPointer.position.dy - _dy > _listerOffsetThreshold) {
        print('向下滑动');
        _setTabBarState((){
          _tabBarHeight = 80.w;
        });
      }
    } else {
      if (-(upPointer.position.dy - _dy) > _listerOffsetThreshold) {
        print('向上滑动');
        _setTabBarState((){
          _tabBarHeight = 0.0;
        });
      }
    }

    final double _deltaX = _endDx - _startDx;
    if(_deltaX.abs() > _listerOffsetThreshold){
      if(_tabBarHeight == 0.0){
        _setTabBarState((){
          _tabBarHeight = 80.w;
        });
      }
    }
  }

//在当前页面中需要局部刷新的模块
_userShareTabBar() {
    //使用StatefulBuilder在手势监听事件中调用局部的刷新(使用setState会刷新整个页面造成卡顿)
    return StatefulBuilder(
        builder: (context, setStateBuilder) {
          _setTabBarState = setStateBuilder;
          return AnimatedContainer(
              duration: Duration(milliseconds: 200),
              height: _tabBarHeight,
              child: UserShareTabBarPage()
          );
        });
  }
相关推荐
于慨21 小时前
mac安装flutter
javascript·flutter·macos
2601_949593651 天前
Flutter_OpenHarmony_三方库_image_picker图片视频采集适配详解
flutter·音视频
2601_949593651 天前
Flutter_OpenHarmony_三方库_fluttertoast消息提示适配详解
flutter
seabirdssss1 天前
Flutter 开发环境配置
android·windows·flutter·adb
2601_949593651 天前
Flutter_OpenHarmony_三方库_webview_flutter网页内容嵌入与交互适配详解
flutter·harmonyos
tangweiguo030519871 天前
Flutter 分页缓存实战:基于 Riverpod 的 SWR 策略实现
flutter
Ww.xh1 天前
鸿蒙Flutter混合开发实战:跨平台UI无缝集成
flutter·华为·harmonyos
SoulRed1 天前
Android Studio 调试flutter gradle的问题
android·flutter·android studio
blanks20201 天前
为 Zed 编辑器 添加 flutter dart snippets
前端·flutter
blanks20201 天前
使用 zed 和 使用 vscode 开发 flutter
flutter