77

showModalBottomSheet不提供任何样式或装饰。我想创建类似 Google Tasks 底页的东西。

谷歌任务底页

4

14 回答 14

227

更新于 2019-08-05

您现在可以使用showModalBottomSheet现在支持添加的默认方法执行此操作ShapeBorder，而且backgroundColor！

showModalBottomSheet(
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10.0),
  ),
  backgroundColor: Colors.white,
  ...
);

--

我没有像其他答案所建议的那样覆盖应用程序的整个主题（这导致我的应用程序的各个部分出现问题），而是决定自己查看实现showModalBottomSheet并找到问题。事实证明，所需要的只是将模式的主要代码包装在Theme包含该canvasColor: Colors.transparent技巧的小部件中。我还让自定义半径和模态本身的颜色变得更容易。

您可以使用pub 上的包或包含相同代码的gist 。不要忘记导入正确的包/文件。

showRoundedModalBottomSheet(
    context: context,
    radius: 20.0,  // This is the default
    color: Colors.white,  // Also default
    builder: (context) => ???,
);
于 2018-08-31T23:05:16.060 回答
105

这是需要的 modalBottomSheet 函数。

    void _modalBottomSheetMenu(){
        showModalBottomSheet(
            context: context,
            builder: (builder){
              return new Container(
                height: 350.0,
                color: Colors.transparent, //could change this to Color(0xFF737373), 
                           //so you don't have to change MaterialApp canvasColor
                child: new Container(
                    decoration: new BoxDecoration(
                        color: Colors.white,
                        borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(10.0),
                            topRight: const Radius.circular(10.0))),
                    child: new Center(
                      child: new Text("This is a modal sheet"),
                    )),
              );
            }
        );
      }

正常工作的最重要部分是，在 MaterialApp 中将 canvasColor 设置为透明，如下所示。

return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tasks',
      theme: new ThemeData(
        primarySwatch: Colors.teal,
        canvasColor: Colors.transparent,
      ),
      home: new TasksHomePage(),
    );
  }

我已经测试了代码，它运行良好，因为我还在克隆 Google Tasks 应用程序，该应用程序将在我的github中开源。

于 2018-06-09T02:24:29.133 回答
83 
showModalBottomSheet(
context:context
shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(20),
        ),
      ),
      clipBehavior: Clip.antiAliasWithSaveLayer,
)
于 2020-06-18T18:32:50.927 回答
36

我认为做圆角模态的最好方法是使用 aRoundedRectangleBorder和一个 vertical BorderRadius，只设置它的top属性：

showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
        ),
        builder: (BuildContext context) {
          // return your layout
        });

对左上角和右上角使用单独的半径会更冗长且容易出错。

于 2020-01-05T18:45:50.497 回答
19

我有这个代码，对我来说很好用。请检查一下，让我知道你的意见。

showBottomSheet(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(20),
            ),
          ),
          context: context,
          builder: (context) => Container(
                height: 250,

                child: new Container(
                    decoration: new BoxDecoration(
                        color: Theme.of(context).primaryColor,
                        borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(20.0),
                            topRight: const Radius.circular(20.0))),
                    child: new Center(
                      child: new Text("This is a modal sheet"),
                    )),
              ))
于 2020-02-26T21:57:38.987 回答
17

您现在可以简单地设置shape参数。例子：

showModalBottomSheet(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
  context: context,
  builder: (context) => MyBottomSheet(),
);
于 2019-05-13T09:27:16.743 回答
5

把之前所有的答案放在一起，我可以为此获得最好的结果（在我看来）。

showModalBottomSheet(
        context: context,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[     
              ListTile(
                leading: Icon(Icons.email),
                title: Text('Send email'),
                onTap: () {
                  print('Send email');
                },
              ),
              ListTile(
                leading: Icon(Icons.phone),
                title: Text('Call phone'),
                 onTap: () {
                    print('Call phone');
                  },
               ),                  
            ],
          );
        });
于 2019-09-13T16:16:24.910 回答
3

你可以在RoundedRectangleBorder里面添加一个小部件showModalBottomSheet：

showModalBottomSheet<void>(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0)
        ),
    ),
)
于 2021-01-19T21:34:22.500 回答
2 
    showModalBottomSheet(
     backgroundColor: Colors.transparent,
     context: context,
     builder: (ctx) {
      return Container( 
      decoration: BoxDecoration(
      color: Colors.green, // or some other color
      borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10.0),
      topRight: Radius.circular(10.0)
       ) 
     );
    });
于 2019-10-27T19:08:34.877 回答
1

您也可以在装饰容器中提供borderRadius。

 showModalBottomSheet(
                context: context,
                builder: (builder){
                  return  Container(
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                                topLeft: const Radius.circular(15.0),
                                topRight: const Radius.circular(15.0))),
                        child: Center(
                          child: Text("This is a modal sheet"),
                        ),
                  );
                }
            );
于 2021-02-06T15:03:56.853 回答
0

刚刚回答了一个相关的问题

您可以根据其中存在的内容为您添加角落bottomSheet并扩展您bottomSheet的内容（不限于屏幕的一半大小）

在这里查看答案

https://stackoverflow.com/a/59541927/9236994

于 2019-12-31T09:12:39.797 回答
0 
showModalBottomSheet(
  context:context
  shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(20),
        ),
      ),
  clipBehavior: Clip.hardEdge,
)

使用 Clip.hardEdge 会好很多。因为它比其他剪辑模式快，但比 [none] 慢。

于 2022-02-10T06:34:24.767 回答
0 
showModalBottomSheet(
    isScrollControlled: true,
    backgroundColor: colorOnPrimary,
    // set this when inner content overflows, making RoundedRectangleBorder not working as expected
    clipBehavior: Clip.antiAlias,
    // set shape to make top corners rounded
    shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16), 
            topRight: Radius.circular(16),
        ),
    ),
    context: context,
    builder: (context) {
        return SingleChildScrollView(
            child: Container(),
        );
    },
)
于 2022-02-17T15:18:14.613 回答
-1

对于持久底页，在材料应用小部件的主题属性中添加以下代码

ThemeData(          
          bottomSheetTheme: BottomSheetThemeData(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
于 2022-01-14T07:00:39.443 回答