flutter - 当我在 Flutter 中单击外部时，如何删除 overlayEntry？

Question

我想在 Android 中有一个像 popupwindow 这样的功能。

我已经为此尝试过。

class CommunityMenu {
  static OverlayEntry overlayEntry;

  static void showMenu(BuildContext context) {
    if (overlayEntry == null) {
      overlayEntry = new OverlayEntry(builder: (context) {
        return Positioned(
          right: 12,
          top: 60,
          child: Container(
            color: Colors.white,
            width: 132,
            height: 153,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                GestureDetector(
                  onTap: (){
                    overlayEntry.remove();
                  },
                  child: Row(
                    children: <Widget>[
                      Text(
                        "Text1",
                        style: TextStyle(
                            color: Color(0xff4d4d4d), fontSize: 14),
                      )
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: () {overlayEntry.remove();
                  },
                  child: Row(
                    children: <Widget>[
                      GestureDetector(
                        onTap: (){
                          overlayEntry.remove();
                        },
                        child: Text(
                          "Text2",
                          style: TextStyle(
                              color: Color(0xff4d4d4d), fontSize: 14),
                        )
                      )
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    overlayEntry.remove();
                  },
                  child: Row(
                    children: <Widget>[
                      Text(
                        "Text3",
                        style: TextStyle(
                            color: Color(0xff4d4d4d), fontSize: 14),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      });
    }

    Overlay.of(context).insert(overlayEntry);
  }

  static void dismissMenu() {
    if (overlayEntry != null) {
      overlayEntry.remove();
      overlayEntry = null;
    }
  }
}

您可以看到，当我单击菜单项时，我可以关闭菜单 (overlayEntry.remove();)。
现在的问题是，当我在菜单外而不是在菜单内单击时，我想关闭菜单。当单击外部时，它看起来像是关闭键盘。

Answer 1

您可以将叠加层放入堆栈并使底层占据全屏，将其子层包装在调用 overlayEntry.remove() 的 GestureDetector 中。下面的代码显示了我的意思。此外，您在弹出窗口中的 onTap 调用只是调用 .remove() 但这意味着仍会构建覆盖条目。您已经有一个可以调用的dismiss() 函数(这就是我所做的)。

return Stack(
  children: <Widget>[
    Positioned.fill(
        child: GestureDetector(
          onTap:dismissMenu,
          child: Container(
            color: Colors.transparent,
          ),
        )
    ),
    Positioned(
      right: 12,
      top: 60,
      child: //column code here
    ),
  ],
);