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（），但这意味着仍会建立overlayentry。您已经有了可以调用的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
    ),
  ],
);

Answer 2

您似乎正在尝试构建标准警报对话框。如果是这样，您应该查看“showDialog”方法，而不是尝试使用 Overlay 构建它。

例如，这是一个弹出对话框的按钮，您可以通过点击对话框外的任意位置或单击后退按钮来关闭对话框。代码：

ElevatedButton(
  child: Text("show dialog"),
  onPressed: () {
    showDialog(
      context: context,
      // barrierColor: Colors.transparent,
      builder: (_) => Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.white,
        ),
      ),
    );
  },
)

如果您不想在对话框之外显示灰色，或者想要更改其颜色，您可以使用我在上面代码中注释掉的 barrierColor 参数。

在Flutter中单击外部时如何删除overlayEntry？

2 个答案: