Flutter开发：设置image圆角的步骤

这是我参与更文挑战的第12天，活动详情查看：更文挑战

在Flutter开发过程中，对于项目需求的一些基本的实现效果是层出不穷，各种基础性的设置以及效果都需要开发者很好的掌握和使用，这样在开发过程中才能快速的开发，提高开发效率和进度。Flutter开发过程中，给image组件设置圆角的效果，稍不留神就踩了坑，而且会浪费没必要的时间，耽误开发进度。那么本文就来分享一个在Flutter开发过程中比较常用的实现效果：给image组件添加圆角。

前言

首先来对比分享一下网上的无良教程关于给image组件设置圆角的方法，这种写法完全没有效果的，把它拿出来举例子是为了起警示作用：

    Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius:BorderRadius.circular(10)
          ),
          child: Image.network(
            imagePath,
            width: 150,
            height: 150,
            fit: BoxFit.cover,
            ),
        ),
      ),
复制代码

读者不要被上面的错误设置方法耽误了时间，切记！

设置image圆角的方法

1、首先来分享一种单纯的以基于修饰器来实现image添加圆角的方式，但是该设置方式有一个缺点就是没有占位图，也不算是缺点吧，是要根据开发实际需求来决定选择哪种设置圆角的方式的，具体代码如下所示：

Center(
        child: Container(
          width: 150,
          height: 150,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              image: DecorationImage(
                image: NetworkImage(imagePath),
                fit: BoxFit.cover,
              )
              ),
        ),
      )
复制代码

2、再来分享一种包含占位图的圆角image的设置方法，这样就有更完善的设置方式了，更加符合项目开发需求，还是根据实际需求情况来做选择设置，具体的代码如下所示：

Scaffold(
        appBar: AppBar(
          title: " ",
        ),
        body: Center(
            child: Container(
          width: 150,
          height: 150,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: FadeInImage.assetNetwork(
              placeholder: "images/ic_login.png",
              image: imagePath,
              fit: BoxFit.cover,
            ),
          ),
        )));
复制代码

示例的效果图如下所示：

根据上述对于给image设置圆角的知识点，在flutter开发过程中，不管是什么知识点，只要稍有不慎就会踩坑，所以开发需谨慎，根据实际情况来实现项目需求。

本次分享就到此为止，以上就是本章全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！