Question

我想创建一个自定义模式，允许我设置高度和边框，

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"),
          )),
    );
  }

当前行为

Answer 1

在RaisedButton的{{1}}方法中使用以下内容。

onPressed()

Answer 2

要使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"),
      ),
    ),
 );

Answer 3

showModalBottomSheet(
 isScrollControlled: true,
              clipBehavior: Clip.antiAlias,
  context: context,
  builder: (context) {
    return Container(
      height: 100, // enter any height of your choice
      color: Colors.blue,
      child: YOUR_WIDGET,
    );
  },
);

如何更改ModalBottomSheet的边框和高度？

3 个答案: