Flutter - 与子小部件交互时停止 ListView 滚动

Question

我有点酸。我正在开发一个 Flutter 应用程序（目前在 Android Studio 的 Windows 上使用 0.8.2 版），我似乎无法解决这个实现细节。很可能它太简单了，我错过了，但如果有人能指出我正确的方向，我将不胜感激！

我的问题是：我在滚动 ListView 中创建了一个自定义颜色选择器小部件。为了让用户正确地与颜色选择器小部件交互，每当用户在选择器内拖动颜色指针时，我都需要停止滚动 ListView，但我需要在交互完成后允许滚动 ListView （所以我不能只是将物理设置为 NeverScrollableScrollPhysics）。

这是界面截图的链接

我目前正在使用侦听器来处理颜色选择器中的交互，每当用户拖动指针时，ListView 也会滚动。我曾尝试使用 GestureDetector，但 Pan DestureDetector 不会阻止 ListView 滚动。我尝试向 GestureDetector 添加一个垂直拖动处理程序，这确实阻止了 ListView 滚动，但这样做会在指针移动之前增加最小拖动距离，因为 GestureDetector 试图区分平移和垂直拖动。

我会喜欢任何建议或正确方向的指针。谢谢！

Answer 1

这是一个老问题，但当我自己也遇到同样的问题时，这里有一个技巧：

 bool _dragOverMap = false;
  GlobalKey _pointerKey = new GlobalKey();

  _checkDrag(Offset position, bool up) {
    if (!up) {
      // find your widget
      RenderBox box = _pointerKey.currentContext.findRenderObject();

      //get offset
      Offset boxOffset = box.localToGlobal(Offset.zero);

      // check if your pointerdown event is inside the widget (you could do the same for the width, in this case I just used the height)
      if (position.dy > boxOffset.dy &&
          position.dy < boxOffset.dy + box.size.height) {
        setState(() {
          _dragOverMap = true;
        });
      }
    } else {
      setState(() {
        _dragOverMap = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text("Scroll Test"),
      ),
      body: new Listener(
        onPointerUp: (ev) {
          _checkDrag(ev.position, true);
        },
        onPointerDown: (ev) {
          _checkDrag(ev.position, false);
        },
        child: ListView(
          // if dragging over your widget, disable scroll, otherwise allow scrolling
          physics:
              _dragOverMap ? NeverScrollableScrollPhysics() : ScrollPhysics(),
          children: [

            ListTile(title: Text("Tile to scroll")),
            Divider(),
              ListTile(title: Text("Tile to scroll")),
            Divider(),
              ListTile(title: Text("Tile to scroll")),
            Divider(),

            // Your widget that you want to prevent to scroll the Listview 
            Container(
              key: _pointerKey, // key for finding the widget
              height: 300,
              width: double.infinity,
              child: FlutterMap(
               // ... just as example, could be anything, in your case use the color picker widget
              ),
            ),
          ],
        ),
      ),
    );
  }
}

对我来说效果很好，也许可以简化一些事情，但你明白了。