flutter 圖片Image實現圓角的四種方法

開發中，對圖片進行圓角處理，是很常見的需求，下面提供四種方法實現圓角效果，控件倒圓角也可以應用

flutter中可以使用Container特性、CircleAvatar的backgroundImage、ClipOval組件、ClipRRect組件實現圓角效果
1、使用Container的特性，進行裁剪實現圓角

    Container(
      width: 100,
      height: 100,
      //超出部分，可裁剪
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
      ),
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        fit: BoxFit.cover,
      ),
    )

2、使用CircleAvatar 的 backgroundImage 屬性實現圓角

    CircleAvatar(
      radius: 50,
      backgroundColor: Colors.white, //未設置背景色，加載圖片時會顯示紅色
      backgroundImage: NetworkImage(
          "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg"),
    )

3、使用 ClipOval 組件來實現圓角

    ClipOval(
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    )

4、使用ClipRRect組件爲圖片實現圓角

    ClipRRect(//是ClipRRect，不是ClipRect
      borderRadius: BorderRadius.circular(50),
      child: Image.network(
        "https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg",
        width: 100,
        height: 100,
        fit: BoxFit.cover,
      ),
    )

flutter 圖片Image實現圓角的四種方法