如何使用Flutter在屏幕上的任意位置点击隐藏覆盖层

Question

我编写了一个包含按钮的小部件Widget。在点击该Button时，会显示一个带有一些文本信息的小“框”。 我使用Overlay解决了这个问题。在Overlay内部是一个GestureDetector。当你点击Overlay时，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

- BHuelse

---

GestureDetector > Align >_createContent() 可以吗？同时尝试使用 GestureDetector.behavior 属性。 - pskink

你可以添加一个布尔变量来表示盒子是否显示，并在Row->GestureDetector的on tap方法中检查该布尔值，然后执行适当的方法（showHelp / HideHelp）。 - TheMri

Answer 1

感谢pskink,

这就是解决方案。将代码更改为以下内容即可：

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

- BHuelse

---

没有 behavior: HitTestBehavior.translucent 它就不起作用（但是与相同的层次结构：detector>align>content）？ - pskink

没有行为的情况下，它什么也不会改变。有了行为，它才能正确运作。 - BHuelse

好的，谢谢。但实际上我想知道原始的align>detector>content是否也可以工作（当然使用HitTestBehavior.translucent）...你能测试一下吗？ - pskink

对齐>检测器>内容无法正常工作，无论是否具有行为。 - BHuelse