我想制作一个弹出窗口,其中包含一些内容,只会覆盖屏幕的一部分,并且在屏幕中央(类似于modalBottomSheet,但在屏幕中央),如果我在其外部按下,则会关闭它。我已经创建了一个扩展PopupRoute的类,但是内容占用整个屏幕(除非我将margins设置为pageBuilder返回的容器,但是这样做会显示背景中的内容,但如果我单击它,什么也不会发生)。
有人有任何想法怎样才能实现我想要的效果吗?
谢谢!
有人有任何想法怎样才能实现我想要的效果吗?
谢谢!
是的,您可以使用 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(),
),
),
);