一行代码解决Flutter fl_chart库触摸线条提示和页面左右滑动冲突

Flutter fl_chart 是一个强大的图表库，通过简单配置就可以实现绚烂的图表效果。

现在项目中多个Tab页面放置了图表控件，图表支持触摸弹出线条指引提示，在实际项目接入过程中测试发现，长按线条时，左右滑动指引提示，Tab不跟随滑动，但是当触摸时间不长，刚出现线条指引时立刻左右滑动页面，线条指引消失了，页面也变成了Tab左右滑动了，达不到想要的交互需求。

在追踪了fl_chart源码发现，fl_chart里面的手势失败器执行了cancel方法

    _panGestureRecognizer = PanGestureRecognizer();
    _panGestureRecognizer
      ..onDown = (dragDownDetails) {
        _notifyTouchEvent(FlPanDownEvent(dragDownDetails));
      }
      ..onStart = (dragStartDetails) {
        _notifyTouchEvent(FlPanStartEvent(dragStartDetails));
      }
      ..onUpdate = (dragUpdateDetails) {
        _notifyTouchEvent(FlPanUpdateEvent(dragUpdateDetails));
      }
      ..onCancel = () {
        _notifyTouchEvent(const FlPanCancelEvent());
      }
      ..onEnd = (dragEndDetails) {
        _notifyTouchEvent(FlPanEndEvent(dragEndDetails));
      };

执行了上面的onCancel。

无疑间发现下面还有一个长按手势识别器

_longPressGestureRecognizer =
    LongPressGestureRecognizer(duration: _longPressDuration);

现在转变思想，当触摸时间比较短时，让长按识别器捕获手势即可。

我们可以看到该长按识别器，支持duration自定义，我们完全可以控制这个时间让它在很短时间内进入长按识别，进而可以一直捕获到手势，不至于滑动时执行onCancel

直接贴解决方案代码

        lineTouchData: LineTouchData(
                    enabled: lineTouchTooltipData != null,
                    longPressDuration: const Duration(milliseconds: 50),
                    touchTooltipData:
                    lineTouchTooltipData ?? const LineTouchTooltipData()),

直接配置一个longPressDuration: const Duration(milliseconds: 50),在触摸区域50ms时间后，进入长按手势识别器。

进入实际测试，完美解决