使用透明背景的Flutter圆角半径
使用透明背景的Flutter圆角半径
以下是我的代码，我希望它能渲染一个带有透明背景的圆角容器。
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"),
)
),
然而它的渲染结果如下，它渲染了一个白色的容器（预期是透明的），并带有圆角半径。有什么帮助吗？
问题的原因是在Flutter中使用BottomSheet时，无法直接设置圆角和透明背景。为了解决这个问题，可以使用BottomSheetTheme来控制底部菜单的样式。最近引入的BottomSheetTheme可以通过在MaterialApp的主题中设置来实现。具体的代码如下所示：
MaterialApp(
theme: ThemeData(
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();},
);
以上方法都可以解决Flutter中设置底部菜单圆角和透明背景的问题。
问题出现的原因是在使用ClipRRect时，容器的底部边缘没有被正确地圆角处理。解决方法是使用showModalBottomSheet时，需要指定bottomSheetTheme。
解决方法如下：
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"),
),
),
);
如果你使用了ColorFiltered，也可以使用同样的方法解决问题。如果你在BoxDecoration中使用了ColorFilter，并且BlendMode为color，那么边缘也无法正确地被圆角处理。
当使用showModalBottomSheet时，需要像建议的那样指定bottomSheetTheme。
希望对你有帮助！
问题的原因是在一个具有圆角的Container内部嵌套了一个背景颜色设置为透明的父元素。默认情况下，如果使用Scaffold，其背景颜色为白色。解决方法是将父元素的背景颜色设置为透明，这样就可以实现所需的效果。
解决方法代码如下：
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: 上面的代码,
)