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()
          );
        });
  }
相关推荐
dragon72510 小时前
一个 Flutter Loading 关不掉的诡异 Bug:从 showDialog 的竞态说起
flutter
一枚菜鸟_10 小时前
在 Flutter 项目里装 Skills:从 0 搭建 AI 辅助开发体系
flutter·ai编程
浮江雾11 小时前
Flutter第五节------Flutter开发环境配置与项目创建指南
开发语言·前端·git·学习·flutter·入门·函数
qq_2468397516 小时前
记一次 Flutter 预热帧引起的初始化问题
android·flutter
心中有国也有家17 小时前
AtomGit Flutter 鸿蒙客户端:MoodStorage 的 CRUD 集成验证
android·服务器·flutter·华为·harmonyos
心中有国也有家18 小时前
AtomGit Flutter 鸿蒙客户端:错误处理与优雅降级策略
android·javascript·flutter·华为·harmonyos
西西学代码1 天前
Flutter---Text
flutter
左有道1 天前
用 Flutter 做一个更顺手的日历组件:calendarview_flutter
flutter
一枚菜鸟_1 天前
Flutter + Cursor 一天出 App?这 3 个坑让开发者多花了 3 小时
flutter·cursor
心中有国也有家2 天前
AtomGit Flutter 鸿蒙客户端:零外部资源的应用打包策略
android·javascript·flutter·华为·harmonyos