flutter - 如何通过 flutter 在屏幕上的某处点击来隐藏覆盖

Question

我编写了一个 Widget，其中包含一个 Button。点击此Button 时，会显示一个小“框”，其中包含一些文本信息。我用 Overlay 解决了这个问题。 Overlay 内部是一个 GestureDetector。当您点击 Overlay 时，Overlay 将被隐藏。因为 Overlay 没有填满整个屏幕，所以如果您在此 Overlay 后面点击它不会关闭它。但我希望当您点击屏幕上的某个位置时，Overlay 将被隐藏，可能在 Overlay 之外。

这是覆盖的部分:

class _OverlayHelpWidgetState extends State<OverlayHelpWidget> {
  OverlayEntry _overlayEntry;
  OverlayState _overlayState;
  bool _isVisible = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Center(
          child: GestureDetector(
            child: Icon(
              Icons.help,
              color: Colors.green[800],
            ),
            onTap: () {
              showHelp();
            },
          ),
        )
      ],
      mainAxisAlignment: MainAxisAlignment.end,
    );
  }

  OverlayEntry _createOverlayEntry() {
    return OverlayEntry(
      builder: (context) => Align(
        alignment: Alignment.center,
        child: GestureDetector(
          child: _createContent(),
          onTap: () {
            hideHelp();
          },
        ),
      ),
    );
  }

  showHelp() async {
    if (!_isVisible) {
      _overlayState = Overlay.of(context);
      _overlayEntry = _createOverlayEntry();
      _overlayState.insert(_overlayEntry);
      _isVisible = true;
    }
  }

  void hideHelp() {
    _isVisible = false;
    _overlayEntry.remove();
  }

有人可以帮我解决吗？

谢谢，Bhuelse

Answer 1

谢谢pskink，

这就是解决方案。改成这个就可以了:

  OverlayEntry _createOverlayEntry() {
    return OverlayEntry(
      builder: (context) => GestureDetector(
        behavior: HitTestBehavior.translucent,
        child: Align(
          alignment: Alignment.center,
          child: _createContent(),
        ),
        onTap: () {
          hideHelp();
        },
      ),
    );
  }