弹出路由占据整个屏幕

Question

我想制作一个弹出窗口，其中包含一些内容，只会覆盖屏幕的一部分，并且在屏幕中央（类似于modalBottomSheet，但在屏幕中央），如果我在其外部按下，则会关闭它。我已经创建了一个扩展PopupRoute的类，但是内容占用整个屏幕（除非我将margins设置为pageBuilder返回的容器，但是这样做会显示背景中的内容，但如果我单击它，什么也不会发生）。

有人有任何想法怎样才能实现我想要的效果吗？

谢谢！

- Razvan Curcudel

---

你考虑过AlertDialog吗？ - Gazihan Alankus

我研究了一下，但是使用对话框来制作表单这种事情似乎不太合适（不太合理）。模态框或弹出框听起来更加适合。 - Razvan Curcudel

Answer 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(),
                                        ),
                                      ),
                                    );

或者创建自己的过渡效果。

- diegoveloper

---

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

请检查我的更新答案，只需将属性barrierDismissible: true添加到PageRouteBuilder中。 - diegoveloper

没错，就是这样。我甚至没有使用AlertDialog，而是用了center->constrainedBox->Material来实现。谢谢。 - Razvan Curcudel