Flutter图片圆角的实现

先看下用三种方式分别实现Flutter图片圆角的效果图：


下面分别记录下这三种方式：

1、使用ClipRRect裁切，简单高效，直接使用：

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.asset("images/borderradius.png"),
),

2、使用Container的decoration，其实就是让Container圆角，然后将要设置圆角的图片作为Container的背景图，自然就变成圆角了：

Container(
  decoration: ShapeDecoration(
      image: DecorationImage(
          image: AssetImage("images/borderradius.png"),
          fit: BoxFit.fitWidth),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadiusDirectional.circular(20))),
  width: double.maxFinite,
  height: 300,
  child: Align(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        "Container decoration实现圆角(radius = 20)",
        style: TextStyle(color: Colors.white),
      ),
    ),
    alignment: Alignment.bottomCenter,
  ),
)

3、Card的shape属性的RoundedRectangleBorder也可以设置圆角：

Card(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadiusDirectional.circular(20)),
    clipBehavior: Clip.antiAlias,
    child: Image.asset(
      "images/landscape0.jpeg",
      width: double.maxFinite,
    ),
)

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！