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
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

Answer 2

它可能会帮助你。

 bool _scroll = false; _toggleScroll() { _scroll = !_scroll; } @override Widget build(BuildContext context) { return Scaffold( body: ListView( // switch scrolling physics: _scroll ? NeverScrollableScrollPhysics() : ScrollPhysics(), children: [], ), ); }