具有透明背景的颤动角半径
Posted
技术标签:
【中文标题】具有透明背景的颤动角半径【英文标题】：flutter corner radius with transparent background 【发布时间】：2018-10-05 03:09:27 【问题描述】：下面是我的代码，我希望渲染一个具有透明背景的圆角容器。
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"),
)
),
然而，这就是它渲染的内容，它会渲染一个具有圆角半径的白色容器（预期为透明）。有什么帮助吗？
【问题讨论】：
【参考方案1】：如果您将 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"),
)
),
),
【讨论】：
如果我在 SliverAppBar 中使用图片，那该怎么做呢？ 你可以使用 SliverFillRemaining(child: aboveCode)【参考方案2】：如果你想用透明背景圆角，最好的方法是使用 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"),
),
),
);
【讨论】：
这可行.. 但在我的容器末端，半径 os 平方：imgur.com/a/Qb5kaVW。你能帮帮我吗？ 也适用于ColorFiltered。如果您有ColorFilter 和BlendMode.color，则BoxDecoration 无法偷工减料。
当与 showModalBottomSheet 一起使用时，您必须像 @jayjw 建议的那样指定 bottomSheetTheme【参考方案3】：
自 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))
)
)
),
Introduced最近，用一个主题来控制表格样式应该是最能解决这个问题的。
如果您想为不同的底部工作表设置不同的主题，请在相应的子树中包含一个新的 Theme 对象，以覆盖该区域的底部工作表主题。
如果由于某种原因您仍想在启动底部工作表时手动覆盖主题，showBottomSheet 和 showModalBottomSheet 现在有了 backgroundColor 参数。像这样使用它：
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (c) return NavSheet();,
);
无论应用/应用的当前主题如何，使用主题都可以重复使用底部工作表，并且没有如上所述设置画布颜色的负面影响。
【讨论】：
这应该是公认的答案...完美运行！backgroundColor: Colors.transparent, 为我工作【参考方案4】：
/// 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()
);
【讨论】：
【参考方案5】：这是一个老问题。但是对于那些遇到这个问题的人......
圆角后面的白色背景实际上并不是容器。这是应用的画布颜色。
修复：将应用的画布颜色更改为 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(),
);
【讨论】：
它确实有一些缺点。其他依赖于画布颜色的对象（例如刷新图标）也将具有透明背景，而不是白色。 我不建议这样做。许多小部件依赖于画布颜色，然后需要单独设置这些小部件。 最佳答案，这应该是最佳答案。 使用这个时，flutter的widgets的所有canvasColor都会变成color.transparent，请尝试打开抽屉，你看到了什么！
终于！解决了我的问题。【参考方案6】：
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),
),
),
);
【讨论】：
【参考方案7】：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"),
)
),
)
这将使您的容器颜色与背景颜色相同。并且将有一个具有相同高度宽度的蓝色子容器。 这将使角落的颜色与背景颜色相同。
【讨论】：
【参考方案8】：modalbottomsheet 使用透明背景色并为盒子装饰提供单独的颜色
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(),
);
);
【讨论】：
【参考方案9】：具有许多高级选项的用于解决此问题的三个相关软件包是：
sliding_up_panel modal_bottom_sheet sliding_panel【讨论】：
【参考方案10】：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,
),
)
);
【讨论】：
【参考方案11】：如果两个容器都是同级容器并且底部容器有圆角 并且顶部容器是动态的，那么您将不得不使用堆栈小部件
Stack(
children: [
/*your_widget_1*/,
/*your_widget_2*/,
],
);
【讨论】：
以上是关于具有透明背景的颤动角半径的主要内容，如果未能解决你的问题，请参考以下文章
具有透明背景的 MPMoviePlayerViewController 视频