我想创建一个允许我设置高度和边框的自定义模式,我已经有了这个。
home.dart
body: Center(
child: RaisedButton(child: Text('Open'), onPressed: () {
showModalBottomSheet(context: context, builder: (BuildContext context) {
return HomeModal();
});
}),
),
home_modal.dart
Widget build(BuildContext context) {
return Container(
color: Colors.transparent,
child: ClipRRect(
borderRadius: BorderRadius.circular(40.0),
child: Container(
height: 800.0,
width: double.infinity,
color: Colors.blue,
child: Center(
child: new Text("Hi modal sheet"),
),
),
),
);
我已经尝试过用容器来
Widget build(BuildContext context) {
return Container(
height: 300.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.green,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: new Text("Hi modal sheet"),
)),
);
}
当前行为
最佳答案
要使 ModalBottomSheet 的角变圆,您需要将 MaterialApp 小部件的 canvasColor 设置为透明。
return new MaterialApp(
theme: new ThemeData(
canvasColor: Colors.transparent,
),
home: HomePage(),
);
要设置 ModalBottomSheet 的高度,您需要将 Container 小部件的高度设置为您想要的值。
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(40.0),
child: Container(
height: ####, // your desired height here
width: double.infinity,
color: Colors.blue,
child: Center(
child: new Text("Hi modal sheet"),
),
),
);
关于flutter - 如何更改 ModalBottomSheet 的边框和高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53913697/