带有透明背景的扑角半径

86

下面是我的代码，我希望使用透明背景渲染一个圆角容器。 

return new Container(
                //padding: const EdgeInsets.all(32.0),
                height: 800.0,
                //color: const Color(0xffDC1C17),
                //color: const Color(0xffFFAB91),
                decoration: new BoxDecoration(
                  color: Colors.green, //new Color.fromRGBO(255, 0, 0, 0.0),
                  borderRadius: new BorderRadius.only(
                    topLeft:  const  Radius.circular(40.0),
                    topRight: const  Radius.circular(40.0))
                ),
                child:  new Container(
                    decoration: new BoxDecoration(
                        color: Colors.blue,
                        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"),
                  )

              ),

但这就是它的渲染效果，它渲染了一个带有圆角半径的白色容器（预期透明）。有什么帮助吗？

屏幕截图

dart  flutter 
— 凯姆齐
source

Answers:

112

如果将Container圆角包裹在父对象的内部，并且背景色设置为“Colors.transparent我认为这就是您想要的”。如果您使用的Scaffold是默认背景色，则为白色。将其更改为Colors.transparent是否可以实现您想要的。

        new 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"),
           )
         ),
        ),
— 阿尔伯特·拉迪扎巴尔
source
1
如果我在SliverAppBar中使用图像，那么该怎么做？
— 阿卜杜勒·哈利姆·拉菲博士
1
您可以使用SliverFillRemaining（child：aboveCode）
— JenonD
42

如果要用透明背景圆角，最好的方法是使用ClipRRect。

return 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"),
    ),
  ),
);
— 达阮
source
这可以..但是在我的容器末端，半径os平方：imgur.com/a/Qb5kaVW。你可以帮助我？
— 奥古斯托
也可以使用ColorFiltered。在BoxDecoration没有偷工减料，如果你有ColorFilter使用BlendMode.color。
— 米兰Jaros，
与showModalBottomSheet使用时，你必须指定bottomSheetTheme像@jayjw建议
— 耶尔安德森
27

从2019年5月1日起，使用BottomSheetTheme。

MaterialApp(
    theme: ThemeData(
      // Draw all modals with a white background and top rounded corners
      bottomSheetTheme: BottomSheetThemeData(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(10))
        )
      )
    ),

最近介绍，使用主题来控制工作表样式应该是解决此问题的最佳方法。

如果要为不同的底页主题设置不同的主题，请在适当的子树中包括一个新的Theme对象，以覆盖该区域的底页主题。

如果由于某种原因您仍然希望在启动底部工作表时手动覆盖主题，则showBottomSheet和showModalBottomSheet现在具有backgroundColor参数。像这样使用它：

 showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (c) {return NavSheet();},
  );

使用主题可以不管应用程序当前的主题如何重复使用底页纸，并且没有设置画布颜色的负面影响。

— 杰伊
source
这应该是公认的答案。
— John Detlefs
backgroundColor: Colors.transparent,为我工作
— tudorprodan
15 
/// Create the bottom sheet UI
  Widget bottomSheetBuilder(){
    return Container(
      color: Color(0xFF737373), // This line set the transparent background
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular( 16.0)
            )
        ),
        child: Center( child: Text("Hi everyone!"),)
      ),
    );
  }

调用此命令以显示带有角的BotoomSheet：

/// Show the bottomSheet when called
  Future _onMenuPressed() async {
    showModalBottomSheet(
        context: context,
        builder: (widgetBuilder) => bottomSheetBuilder()
    );
  }
— 佩德罗·马桑哥（Pedro Massango）
source
14

这是一个老问题。但是对于那些遇到这个问题的人...

圆角后面的白色背景实际上不是容器。那是应用程序的画布颜色。

修复：将应用程序的画布颜色更改为Colors.transparent

例：

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);
— 豪尔赫·门吉瓦尔
source
它确实有一些缺点。依赖于画布颜色的其他对象（例如刷新图标）也将具有透明背景，而不是白色。
— 豪尔赫·门吉瓦尔
3
我不建议这样做。许多小部件都依赖于画布的颜色，因此所有这些小部件都需要单独设置。
— mauriii
最佳答案，这应该是最佳答案。
— 艾文·奎松
使用此工具时，所有canvasColor的颤动 widgets都会变为color.transparent，请尝试打开抽屉，您会看到什么！
— Nourein
最后！解决了我的问题。
— mbartn
8 
Scaffold(
  appBar: AppBar(
    title: Text('BMI CALCULATOR'),
  ),
  body: Container(
    height: 200,
    width: 170,
    margin: EdgeInsets.all(15),
    decoration: BoxDecoration(
      color: Color(
        0xFF1D1E33,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
  ),
);
— 里斯·库姆斯
source
3

使用透明背景色作为模态底片，并为框装饰提供单独的颜色 

   showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context, builder: (context) {
    return Container(

      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft:Radius.circular(40) ,
            topRight: Radius.circular(40)
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 20,horizontal: 60),
      child: Settings_Form(),
    );
  });
— 阿迪亚（Aditya A.Rajan）
source
0 
class MyApp2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) { 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          elevation: 0,
          color: Colors.blueAccent,
        )
      ),
      title: 'Welcome to flutter ',
      home: HomePage()
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int number = 0;
  void _increment(){
   setState(() {
      number ++;
   });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueAccent,
        appBar: AppBar(
          title: Text('MyApp2'), 
          leading: Icon(Icons.menu),
          // backgroundColor: Colors.blueAccent,

          ),
        body: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(200.0),
              topRight: Radius.circular(200)
            ), 
            color: Colors.white,
          ),
        )
      );
  }
}
— 依巴尼·伊祖库乌
source
0 
showModalBottomSheet(
   context: context,
   builder: (context) => Container(
            color: Color(0xff757575), //background color 
            child:  new Container(
                decoration: new BoxDecoration(
                    color: Colors.blue,
                    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"),
              )

     

 ),

)

这将使您的容器颜色与背景颜色相同。并且将有一个具有相同高度和宽度的蓝色子容器。这将使角与背景色具有相同的颜色。

— 莫希特·查克拉
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.