Flutter 圆角图片的几种实现

Flutter 圆角图片的几种实现

---

圆角图片是 APP 开发中的常用设置，我们在 Flutter 中如何实现呢？

使用 ClipRRect 实现

第一种方式，直接使用 ClipRRect 实现，非常简单：

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Image.asset('assets/images/task_icon.jpg'),
),

使用 Card 实现

第二种方式，使用 Card 来实现：

Card(
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadiusDirectional.circular(10)),
  clipBehavior: Clip.antiAlias,
  child: Image.asset("assets/images/task_icon.jpg",
    width: double.maxFinite,
  ),
),

使用 Container 的 decoration 实现

上面两种方式，可以正常设置圆角图片，但是如果我们想让图片作为背景，背景上再叠加其他 Widget 怎么办呢？

这时，可以使用 使用 Container 的 decoration 来实现：

Container(
          decoration: ShapeDecoration(
            image: new DecorationImage(
              //设置背景图片
              image: AssetImage("assets/images/task_icon.jpg"),
              fit: BoxFit.cover,
            ),
            //设置圆角
            shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),
          ),
          //设置边距
          margin: EdgeInsets.only(top: 16, left: 20, right: 20),
          child: new Card(
            color: Colors.transparent,
         ……
)

---

**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》
**PS：更多精彩内容，请查看 --> 《Flutter 开发》