通常情况下,我们都知道使用Container widget 的BoxDecoration可以实现圆角效果。但是今天我遇到了一种情况:就是Container 需要背景颜色,又需要进行圆角。我尝试用Container进行圆角与设置背景颜色。具体代码如下:
Container(
height: 20,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.red,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
// border: new Border.all(color: ColorUtil.hexColor(0x38CFCF),width: 0.5),
),
child: new Text(tag,
style: TextStyle(
fontSize: 12,
color: ColorUtil.hexColor(0x38CFCF)
)),
);
然而报错了,
大致意思就是:Container color与BoxDecoration 不能同时共存。然后在找了解决方法。具体方法如下:
new PhysicalModel(
color: Colors.transparent,
borderRadius:BorderRadius.circular(5),
clipBehavior: Clip.antiAlias,
child: new Container(
padding: EdgeInsets.fromLTRB(6, 4, 6, 4),
color: ColorUtil.hexColor(0xd0d0d0),
child: new Text(model.expertPosition,
style: TextStyle(
fontSize: 14,
color: Colors.white
),),
),
),
使用PhysicalModel 进行圆角操作,Container则用来设置背景颜色。源码解释如下:
/// Creates a physical model with a rounded-rectangular clip.
///
/// The [color] is required; physical things have a color.
///
/// The [shape], [elevation], [color], [clipBehavior], and [shadowColor] must
/// not be null. Additionally, the [elevation] must be non-negative.
总结:
Container 可以做圆角效果。但是不能设置背景颜色。Container一般适用于带边框的无背景颜色的圆角。Container也适用渐变色。
PhysicalModel就是裁剪效果。
如有错误,请在下方评论。谢谢。