移动滑块时如何锁定页面滚动 [英] How to lock page scrolling when moving a slider

问题描述

在Flutter中，我有一个应用程序，该应用程序在自定义ListView小部件内包含一个自定义滑块.唯一的问题是，当您移动滑块手柄(从左到右)时，由于ListView，页面仍将滚动(上下)，而我需要页面锁定到位，直到用户停止移动滑块.

In Flutter, I have an app with a custom Slider inside a custom ListView widget. The only problem is that when you move the slider handle (left to right), the page will still scroll (up and down) due to the ListView, whereas I would need the page to lock in place until the user stops moving the slider.

我首先查看了材质应用程序的滑块代码，但找不到任何有帮助的东西.我还尝试过使用滑块，它具有我想要实现的效果，这告诉我问题出在我的自定义滑块上. *

I started off by having a look at the material app slider code but couldn't find anything that would help. I've also played around with the slider and it has the effect that I am trying to achieve, which tells me the problem lies in the my custom slider. *

我在滑块小部件中使用侦听器来检测手势，因此我会假设我在某处缺少几行? 任何帮助将不胜感激，欢呼.

I am using a Listener in the slider widget to detect gestures so I would assume that I am missing a few lines in there somewhere? Any help would be appreciated, cheers.

更新:*我也尝试过更改侦听器的行为，但这似乎并不能解决问题.

Update: * I have also tried changing the behaviour of the listener but that hasn't seemed to solve the problem.

这是ListView中的滑块- 注意:滑块可以有多个手柄(因此是自定义的)，但在这种情况下，只显示一个即可避免混淆.

Here is the slider within the ListView - Note: the slider can have multiple handles (hence why it's custom) but in this case just showing a single to avoid confusion.

@override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
    Center(
     child: StagedSlider.single(
      value: point,
      //A function which changes the handle value
      onChanged: setHandleInfo,
     ),
    ),
...

以下是滑块内的侦听器:

Here is the listener inside the slider:

return Listener(
      behavior: HitTestBehavior.translucent,
      //The following return functions to calculate handle
      //position/progress...
      onPointerDown: someFunction(),
      onPointerMove: someFunction(),
      onPointerUp: someFunction(),
      //Child is a stack of handles/thumbs calculated higher up
      child: handles,
      ),
    );

仅作为示例，如果要以垂直向上的方向移动滑块手柄，则该手柄将沿水平轴移动，而整个页面将垂直向下移动. 在另一个手柄上，Material App Slider不会执行此操作，在这种情况下，只会移动手柄.

Just as an example, if you were to move the slider handle in a vertical-upwards motion, the handle would move along the horizontal axis and the whole page would move down vertically. On the other handle, the Material App Slider does not do this and in this case would only move the handle.

Update2: 因此，快速解决方案是仅使用手势检测器而不是侦听器.我尝试了一下，似乎所有问题都已解决.但是，由于另一个不相关的问题，如果有人使用Listener来解决问题，那我早就遇到了.

Update2: So a quick fix for this would be to just use a Gesture Detector instead of a Listener. I tried it out and all the issues seemed to have been fixed. However, due to another unrelated issue I was having earlier if someone had a solution using the Listener that would be great.

推荐答案

所以，经过几天的工作，我用一块石头砸了两只鸟，找到了一个解决方案，可以解决此问题和我以前的帖子

So after a days work I've cracked two birds with one stone and found a solution which solves both this and my previous post here

只是想留下一个答案，以防其他人遇到这个问题并遇到类似的问题.

Just wanted to leave an answer incase anyone else comes across this and has similar problems.

我基本上在下面使用了RawGestureDetector:

I basically used the RawGestureDetector below:

class _MyGestureDetector extends OneSequenceGestureRecognizer {
  final Function onHorizontalDragDown;
  final Function onHorizontalDragUpdate;
  final Function onHorizontalDragUp;

  _SingleDeviceGestureDetector({
    @required this.onHorizontalDragDown,
    @required this.onHorizontalDragUpdate,
    @required this.onHorizontalDragUp,
  });

  @override
  void addPointer(PointerEvent event) {
    //Returns true or false depending on whether there
    //is a pointer on screen already
    if (onHorizontalDragDown(event)) {
      startTrackingPointer(event.pointer);
      resolve(GestureDisposition.accepted);
    } else {
      stopTrackingPointer(event.pointer);
    }
  }

  @override
  void handleEvent(PointerEvent event) {
    //If the pointer is being dragged
    if (event is PointerMoveEvent) {
      //Sends the position of the drag
      onHorizontalDragUpdate(event.position);
    }
    //If the pointer is being lifted
    else if (event is PointerUpEvent) {
      onHorizontalDragUp(event);
      stopTrackingPointer(event.pointer);
    }
  }

  @override
  String get debugDescription => 'singlePointerDrag';

  @override
  void didStopTrackingLastPointer(int pointer) {}
}

这篇关于移动滑块时如何锁定页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！