Flutter：实现 peek & pop 效果

Question

我试图实现 peek & pop 效果 - 当用户点击并按住卡片时，会打开一个对话框，并在用户不再点击屏幕时关闭：

Listener(
    onPointerDown: (PointerDownEvent e) {
      // open dialog
      showDialog(
          context: context,
          builder: (context) => Container(
                child: Card(),
              ));
    },
    onPointerUp: (PointerUpEvent e) {
      // dismiss dialog
      if (Navigator.of(context).canPop()) {
        Navigator.of(context).pop('dialog');
      }
    },
    child: Card()
)

效果很好，当我按住卡片时会显示对话框，当我不再按住卡片时会关闭。

但我希望在调用 onPointerDown 之前有一些延迟，例如来自 GestureDectector 的 onLongPress - 当我长按时我能够显示对话框，但是当我离开屏幕时从未调用过 onTapUp：

GestureDetector(
  onLongPress: () {
    // open dialog
    showDialog(
        context: context,
        builder: (context) => Container(child: Card()));
  },
  onTapUp: (TapUpDetails d) {
    // dismiss dialog
    if (Navigator.of(context).canPop()) {
      Navigator.of(context).pop();
    }
  },
  child: Card()
)

我尝试通过以下方式执行此操作，但也从未调用过 onTapUp：

  GestureDetector(
  onTapDown: (TapDownDetails d) {
    // open dialog
    showDialog(context: context, builder: (context) => Card());
  },
  onTapUp: (TapUpDetails d) {
    // dismiss dialog
    if (Navigator.of(context).canPop()) {
      Navigator.of(context).pop();
    }
  },
  child: Card())

但以下显示水龙头已正确注册：

GestureDetector(
  onTapDown: (TapDownDetails d) {
    print("down")
  },
  onTapUp: (TapUpDetails d) {
    print("up")
  },
  child: Card()
)

环顾四周后，我注意到flutter PR 添加了 onLongPressUp - 我将这些更改添加到我的颤振中，然后尝试重新实现我以前的代码，如下所示：

GestureDetector(
  onLongPress: () {
    // open dialog
    showDialog(
        context: context,
        builder: (context) => Container(child: Card()));
  },
  onLongPressUp: () {
    // dismiss dialog
    if (Navigator.of(context).canPop()) {
      Navigator.of(context).pop();
    }
  },
  child: Card()
)

对话框在长按时显示，但当我不再长按时从未关闭 - 似乎没有调用 onLongPressUp，但以下显示它正在正确注册我的点击：

GestureDetector(
  onLongPress: () {
    print("longpress")
  },
  onLongPressUp: () {
    print("longpressup")
  },
  child: Card()
)

在所有这些中，只有使用 Listener 我才能通过点击向下和向上点击来打开和关闭对话框，但我想在调用 onPointerDown 之前添加一个延迟，我还尝试在 onPointerDown 添加一个 Timer但似乎不起作用。

有什么解决办法吗？

Answer 1

这是一个使用StatefulWidget 和Stack 而不是Navigator 的解决方案。

我在您的代码中遇到的问题是，当您使用showDialog 打开对话框时，Listener 不再接收指针事件，因此最好将所有内容放在一个顶级小部件下。

我也在使用Timer，当指针上升或用户离开页面时，它会被取消。

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer _showDialogTimer;
  bool _dialogVisible = false;

  @override
  void dispose() {
    _showDialogTimer?.cancel();
    super.dispose();
  }

  void _onPointerDown(PointerDownEvent event) {
    _showDialogTimer = Timer(Duration(seconds: 1), _showDialog);
  }

  void _onPointerUp(PointerUpEvent event) {
    _showDialogTimer?.cancel();
    _showDialogTimer = null;
    setState(() {
      _dialogVisible = false;
    });
  }

  void _showDialog() {
    setState(() {
      _dialogVisible = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    final layers = <Widget>[];

    layers.add(_buildPage());

    if(_dialogVisible) {
      layers.add(_buildDialog());
    }

    return Listener(
      onPointerDown: _onPointerDown,
      onPointerUp: _onPointerUp,
      child: Stack(
        fit: StackFit.expand,
        children: layers,
      ),
    );
  }

  Widget _buildPage() {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example App'),
      ),
      body: Center(
        child: Text('Press me'),
      ),
    );
  }

  Widget _buildDialog() {
    return Container(
      color: Colors.black.withOpacity(0.5),
      padding: EdgeInsets.all(50.0),
      child: Card(),
    );
  }
}

Answer 2

编辑 3：v1.0.0 终于发布了！比以往更流畅、更优化、更美观。非常可定制且非常易于使用。在Pub 或GitHub 上查看。

编辑 2：v0.1.9 不再需要对 Flutter 的普通“binding.dart”进行任何修改！你可以让你的 Flutter 源代码保持愉快。如果您从早期版本更新，您可以将“binding.dart”恢复为原始格式。感谢大家的反馈。

编辑：人们对修改 Flutter 的正常“binding.dart”表示担忧。不用担心，即将发布的 v0.1.9 不需要此修改。现在，您可以暂时按照安装说明开始使用 v0.1.8 进行开发。更新后，您可以将“binding.dart”恢复为原始格式。

我不知道它是否仍然相关，但我正在为此特定目的开发一个 Flutter 包，您可以找到 here 和 here。

这是基于同名 iOS 功能的 Flutter 的 Peek & Pop 实现。

这个包的强大之处就是我喜欢称之为“手势识别重新路由”。通常，当带有 GestureDetector 或类似的新小部件被推送到用于检测 Force Press 的初始小部件上时，用户必须重新启动手势以便 Flutter 继续更新它。这个包解决了这个问题。如文档中所述：

///This function is called by the instantiated [PeekAndPopChild] once it is ready to be included in the Peek & Pop process. Perhaps the most
///essential functionality of this package also takes places in this function: The gesture recognition is rerouted from the  [PeekAndPopDetector]
///to the instantiated [PeekAndPopChild]. This is important for avoiding the necessity of having the user stop and restart their Force Press.
///Instead, the [PeekAndPopController] does this automatically so that the existing Force Press can continue to update even when if
///[PeekAndPopDetector] is blocked by the view which is often the case especially when using PlatformViews.

包的核心是“PeekAndPopController”小部件。这个小部件是高度可定制的。您可以控制整个过程，甚至可以根据自己的喜好阻止默认行为并运行您自己的序列。

看看这个video 的一些例子。这是来自 V0.1.0 的视频，因此该软件包现在更加优化 - 它运行得更好，更流畅。

如果您有任何问题，请告诉我！