占据所有屏幕的弹出路线

Posted 2023-02-23

【中文标题】占据所有屏幕的弹出路线

【英文标题】：Popup route taking all the screen

【发布时间】：2020-03-06 15:21:10

【问题描述】：

我尝试制作一个包含一些内容的弹出窗口，这些内容将仅覆盖屏幕的一部分，在中心（类似于 modalBottomSheet，但在屏幕的中心），如果我在它外面按下，它将关闭。 我能够创建一个扩展 PopupRoute 的类，但内容占据了所有屏幕（除非我为 pageBuilder 返回的容器设置边距，但是，通过这种方式，显示了后面的内容，但是如果我单击它，什么都没有发生）。

有没有人知道如何实现我想要的？

谢谢，

【问题讨论】：

您考虑过 AlertDialog 吗？

我进行了调查，但将对话框用于我想做的事情（制作表单）听起来不合逻辑。模态或弹出窗口听起来更合适。

【参考方案1】：

是的，您可以使用PageRouteBuilder 来实现，也可以使用AlertDialog 小部件来避免所有对话框自定义，如下所示：

class SamplePage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return AlertDialog(
      content: SizedBox(
        //HERE THE SIZE YOU WANT
        height: MediaQuery.of(context).size.height / 2,
        width: MediaQuery.of(context).size.width / 2,
        //your content
        child: Center(
          child: RaisedButton(
            onPressed: () 
              Navigator.of(context).pop();
            ,
            child: Text("Hello world"),
          ),
        ),
      ),
    );
  

并以这种方式打开您的对话框：

  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                              barrierDismissible: true,
                                        opaque: false,
                                        pageBuilder: (_, anim1, anim2) => SamplePage(),

                                      ),
                                    );

当然，您可以通过非常简单的方式使用过渡添加一些额外的动画：

淡出

  Navigator.push(
                                      context,
                                      PageRouteBuilder(
barrierDismissible: true,
                                        opaque: false,
                                        pageBuilder: (_, anim1, anim2) =>
                                            FadeTransition(
                                          opacity: anim1,
                                          child: SamplePage(),
                                        ),

                                      ),
                                    );

幻灯片

  Navigator.push(
                                      context,
                                      PageRouteBuilder(
barrierDismissible: true,
                                        opaque: false,
                                        pageBuilder: (_, anim1, anim2) =>

                                            SlideTransition(
                                          position: Tween<Offset>(
                                                  begin: Offset(0.0, 1.0),
                                                  end: Offset.zero)
                                              .animate(anim1),
                                          child: SamplePage(),
                                        ),
                                      ),
                                    );

或者创建您自己的过渡。

【讨论】：

这种方法与使用 Popup/ModalRoute 和设置了边距的 Container 的方法有相同的问题，如果我在对话框内容之外点击它不会关闭

检查我更新的答案，只需将此属性 barrierDismissible: true, 添加到 PageRouteBuilder

是的，就是这样。我什至没有使用 AlertDialog 就设法做到了这一点，但它是一个中心->约束框->材料。谢谢