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()
          );
        });
  }
相关推荐
2601_9498477517 小时前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
大龄秃头程序员20 小时前
Flutter 中我为什么把 GetX 定位为高效率方案,而不是默认架构方案
flutter
传奇开心果编程1 天前
组合优先开发范式:从汉字造字原理到声明式UI组件组合思想
android·flutter·ios·swiftui·移动开发·harmonyos·android jetpack
2501_944521591 天前
Ramda 跨端三方库仓颉适配全流程
开发语言·javascript·flutter·php
大龄秃头程序员2 天前
Flutter 架构里总被混淆的 IoC、DI、Service Locator,到底是什么关系?
flutter
事圆则缓2 天前
Flutter 与原生交互的最后一层:RTC 视频帧怎么走
flutter·音视频·实时音视频
2601_949847752 天前
jose 跨端三方库仓颉适配全流程
前端·javascript·flutter
2601_949970692 天前
msgpackr 跨端三方库仓颉适配全流程
前端·javascript·flutter
2601_949970692 天前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
传奇开心果编程3 天前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
flutter·移动开发·跨平台·dart·编程语言理论·编程框架·声明式ui