如何通过点击屏幕上的某个位置来隐藏叠加层

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();
  }

有人可以帮我解决吗？

谢谢，布尔斯

Answer 1

谢谢 pskink，

这就是解决方案。改成这样就可以了：

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