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()
          );
        });
  }
相关推荐
GitLqr11 小时前
iOS 27 强制要求 UISceneDelegate:UIKit 和 Flutter 开发者该如何应对?
flutter·ios·全栈
蜡台15 小时前
Flutter HTTP 请求完整详解
网络协议·flutter·http·dart
97650333517 小时前
iOS 上架/审核 4.3a Cocos 2026最新方案解读
flutter·ios·swift·cocos2d·ios开发
FungLeo1 天前
Flutter 接入 Alice 调试浮窗:一个顶层 final 抢跑,把 release 网络整没了
网络·flutter
恋猫de小郭2 天前
Flutter hit,一个可以灵活控制溢出点击的第三方包
android·前端·flutter
蜡台2 天前
Flutter Container 与装饰完整讲解
android·javascript·flutter·dart
杉氧3 天前
跨平台持久化:Flutter 本地数据库的多线程安全与架构设计实践
android·前端·flutter
yuanlaile3 天前
Flutter 开发鸿蒙 App 踩坑总结,一套完整实战学习方案分享
flutter·harmonyos·flutter开发鸿蒙·flutter开发鸿蒙实战·flutter ai实战·鸿蒙 ai实战
1001101_QIA3 天前
flutter打包流程
flutter
GitLqr3 天前
Flutter FocusNode 实战指南:玩转键盘焦点与用户输入体验
android·flutter·ios