Flutter 实现圆角裁剪

通常情况下，我们都知道使用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就是裁剪效果。

如有错误，请在下方评论。谢谢。