Flutter组件之ClipRRect简单使用

在flutter中Container生成圆角形状的代码如下：

Container(,
    width:200,
    height:200,
    decoration: BoxDecoration(
        border: Border.all(color:Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    )
)

效果图如下:

当嵌套一个图片时，图片并不尊重Container的圆角形状，直接以长方形撑破了Container，显示效果不好，代码如下：

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        border:Border.all(color: Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    ),
    child: Image.network(
        "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/16/171818a272f1dbc8~tplv-t2oaga2asx-image.image",
        fit: BoxFit.cover,
    ),
)

效果为:

此时，只需要将child套在ClipRRect中，将切割半径设为Container的圆角半径即可。代码如下：

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        border:Border.all(color: Color(0xFFE9E2EE)),
        borderRadius: BorderRadius.circular(50),
        color: Colors.green
    ),
    child: ClipRRect(
        borderRadius: BorderRadius.circular(50),
        child: Image.network(
          "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/16/171818a272f1dbc8~tplv-t2oaga2asx-image.image",
          fit: BoxFit.cover,
        ),
     ),
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/4/16/1718198a7307f765~tplv-t2oaga2asx-image.image)
)

效果图为:

当然也可以设置borderRadius四个角的切割，以满足不同的需求。

borderRadius: BorderRadius.only(topLeft: Radius.circular(50),bottomRight: Radius.circular(50)),

效果如下:

这就是ClipRRect的简单用法，谢谢观看。