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

时间:2018-09-27 19:37:12

标签: listview flutter

我有点咸菜。我正在开发Flutter应用程序(当前在Android Studio中的Windows上使用版本0.8.2),但似乎无法解决这一实现细节。很有可能它是如此之简单,以至于我错过了它,但是如果有人能指出我正确的方向,我将不胜感激!

我的问题是:我在滚动的ListView中有一个自定义的颜色选择器小部件。为了使用户能够正确地与颜色选择器小部件交互,每当用户在选择器内拖动颜色指针时,我都需要停止ListView的滚动,但是一旦交互完成,我需要允许ListView滚动(所以我不能只是将物理设置为NeverScrollableScrollPhysics)。

此处是指向该屏幕截图的链接 Interface

我目前正在使用侦听器来处理颜色选择器中的交互,并且每当用户在其周围拖动指针时,ListView也会滚动。我尝试使用GestureDetector,但平移DestureDetector不会阻止ListView滚动。我也尝试向GestureDetector添加垂直拖动处理程序,这确实阻止了ListView滚动,但是由于GestureDetector试图区分平移和垂直拖动,因此这样做会在指针移动之前添加最小拖动距离。

我喜欢任何建议或正确方向的指点。谢谢!

2 个答案:

答案 0 :(得分:1)

这是一个古老的问题,但是当我自己为同一个问题苦苦挣扎时,这里有一个hack:

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

对我来说很好,也许可以简化一些事情,但是您明白了。

答案 1 :(得分:1)

它可能对你有帮助。

  bool _scroll = false;

  _toggleScroll() {
    _scroll = !_scroll;
  }

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

相关问题