首页 > 建站教程 > APP开发,混合APP >  Flutter图片圆角的实现正文

Flutter图片圆角的实现

先看下用三种方式分别实现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,
    ),
)