flutter - 如何检测小部件外部的点击？

Question

我有一个按下按钮时显示的菜单，我希望能够在菜单外点击时关闭菜单，就像常规的 PopupMenuButton 一样。

我目前的解决方案是使用一个 Stack，它有一个 GestureDetector 作为它的子项之一来检测点击，但是使用这个解决方案我的对齐是由 控制的Stack，我只希望对齐由菜单的父级控制，而不是 Stack。

//part of the build method

return Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Column(             
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                //Holds the list of menu items
                menuContainer, 
                //button that displays the menu
                floatingActionButton]                                 
              ),
              //Detects taps outside the menu
              GestureDetector(onTap: (() => setVisibility(false))
        )
      ]
    ); 

Answer 1

您可以使用自定义路由实现此行为:

class CustomDialog extends PopupRoute {
  @override
  Color get barrierColor => Colors.transparent;

  @override
  bool get barrierDismissible => true;

  @override
  String get barrierLabel => null;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return _builder(context);
  }

  Widget _builder(BuildContext context) {
  return Container();
  }

  @override
  Duration get transitionDuration => Duration(milliseconds: 300);
}

barrierDismissible 覆盖指示当在小部件外部检测到触摸时是否应将路由从堆栈中弹出。每当您想显示菜单时，您都可以调用 Navigator.of(context).push(CustomDialog())。

此解决方案不允许菜单返回任何值，如果您需要从中返回数据，则可以改写 ModalRoute 并获得类似的结果。