Question

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

对任何人有任何想法，我如何才能实现自己想要的？

谢谢

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

或创建自己的过渡。

弹出路线占据所有屏幕

1 个答案: