颤振底片圆角半径答案

【问题标题】：Flutter bottom sheet corner radius颤振底片圆角半径
【发布时间】：2019-02-20 04:11:28
【问题描述】：

我正在编写一个需要具有圆角半径的底页的应用程序。您可以在 Google Task 应用中看到类似的内容。

这是我的代码

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Colors.transparent,
            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"),
                )),
          );
        });

仍然显示没有边框半径的工作表。

好的，我找到了原因。它确实显示了圆角，但由于脚手架背景颜色，容器的背景保持白色。现在的问题是如何覆盖脚手架背景颜色。

【问题讨论】：

标签： dart material-design flutter bottom-sheet

【解决方案1】：

我在使用 modal_bottom_sheet 库时遇到了完全相同的问题。但是在我将 backgroundColor 设置为透明之后......它就像魔法一样工作

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent, // Add this line of Code

    builder: (builder) {
      return new Container(
        height: 350.0,
        color: Colors.transparent,
        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"),
            )),
      );
    });

【讨论】：

【解决方案2】：

主屏幕文件：

@override
Widget build(BuildContext context) {
  return Scaffold(
      key: _scaffoldKey,
      body: Column(
          children: [
              InkWell(
                onTap: () {
                    _scaffoldKey.currentState!
                        .showBottomSheet(
                    (context) => const AddItemBottomSheet(),
                    backgroundColor: Colors.transparent,
                    );
                },
                child: Column(children: [
                    const Icon(
                    Icons.add_circle_outline_rounded,
                    size: 32,
                    ),
                    Text(
                    'Add Item',
                    ),
                ]),
                ),
          ]
      )
  );
}

add_item_bottom_sheet.dart

class AddItemBottomSheet extends StatefulWidget {
  const AddItemBottomSheet({Key? key}) : super(key: key);

  @override
  State<AddItemBottomSheet> createState() => _AddItemBottomSheetState();
}

class _AddItemBottomSheetState extends State<AddItemBottomSheet> {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
            blurRadius: 60.0,
            color: Colors.black.withOpacity(0.2),
            spreadRadius: 50,
            offset: const Offset(0.0, -10.0)),
       ],
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0),
      ),
     ),
     child: SingleChildScrollView(
     child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
          
              //Your UI items on BottomSheet

          ],
        ),
     ),
    ),
  );
 }
}

【讨论】：

【解决方案3】：

您还应该检查工作表上的小部件。即使应用了边框，似乎其他小部件填充了空间并且没有应用。使用衬垫等来固定座椅的上部空间。

【讨论】：

【解决方案4】：

使用形状属性。

showModalBottomSheet(
    context: context,
    shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                  topRight: Radius.circular(40),
                  topLeft: Radius.circular(40),
                  ),
    ),
    builder: (builder) {
      return new Container(
        height: 350.0,
        color: Colors.transparent,
        child: YourWidget(),
    });

【讨论】：

【解决方案5】：

使用此代码，它对我来说非常有效！

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))

这是完整的代码。

showModalBottomSheet(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(10.0),
       ),
        context: context,
        builder: (BuildContext bc) {
          return StatefulBuilder(
              builder: (BuildContext context, StateSetter state) {
            return SingleChildScrollView(
                child: InkWell(
                    onTap: () {},
                    child: Container(
                        margin:
                            EdgeInsets.only(left: 10, right: 10, bottom: 10),
                        child: Column(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: Container()))));
          });
        });

输出：

【讨论】：

【解决方案6】：

使用 ClipRRect 小部件，如下所示。

showMaterialModalBottomSheet(
                backgroundColor: Colors.transparent,
                context: context,
                builder: (context, scrollController) =>
                    ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Container(
                        height:
                        MediaQuery.of(context).size.height *
                            0.95,
                        child: whateverChild();

【讨论】：

【解决方案7】：

在 show showModalBottomSheet 中使用 shape 属性并赋予它 RoundedRectangleBorder。

showModalBottomSheet(
        context: context,
        shape : RoundedRectangleBorder(
            borderRadius : BorderRadius.circular(20)
        ),
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Color(0xFF737373),
            child: new Container(
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

【讨论】：

【解决方案8】：

对于那些仍在尝试解决此问题的人：

由于某些原因Colors.transparent 不起作用，所以您只需将颜色更改为：Color(0xFF737373)

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Color(0xFF737373),
            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"),
                )),
          );
        });

【讨论】：

它是为那些不想使用ThemeData的人准备的

【解决方案9】：

  _settingModalBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc){
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(ScreenUtil().setWidth(16)),
              topRight: Radius.circular(ScreenUtil().setWidth(16))
            ),
          ),
        );
      }
    );
  }

看起来像这样： result_1

在main.dart中添加以下代码后：

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent
  ),
);

看起来像这样： result_2

【讨论】：

是的，我就是这么回答的。

【解决方案10】：

好的，所以将我的应用主题中的 canvasColor 更改为 Colors.transparent 有效。

【讨论】：