一.設(shè)置圓角

1. 在網(wǎng)上看了許多的文章，都是使用如下代碼 ，然而無效

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

2.使用裝飾器可以實現(xiàn)圓角效果，但是如果我們需要加一個占位圖呢

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

3.有圓角有占位圖

Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Container(
          width: 250,
          height: 150,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: FadeInImage.assetNetwork(
              placeholder: "images/ic_device_image_default.png",
              image: imagePath,
              fit: BoxFit.cover,
            ),
          ),
        )));

二 .圓形圖片，圓角圖片方案

1. CircleAvatar

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleAvatar(
        radius: 100,
        backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
        child: Container(
          alignment: Alignment(0, .5),
          width: 200,
          height: 200,
          child: Text("兵長利威爾")
        ),
      ),
    );
  }
}

2. ClipOval

class ImageCircleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: ClipOval(
        child: Image.network(
          "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
          width: 200,
          height: 200,
        ),
      ),
    );
  }
} 

3. Container+BoxDecoration

const BoxDecoration({
    this.color, // 顏色，會和Container中的color屬性沖突
    this.image, // 背景圖片
    this.border, // 邊框，對應(yīng)類型是Border類型，里面每一個邊框使用BorderSide
    this.borderRadius, // 圓角效果
    this.boxShadow, // 陰影效果
    this.gradient, // 漸變效果
    this.backgroundBlendMode, // 背景混合
    this.shape = BoxShape.rectangle, // 形變
  })

class ImageCircleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          image: DecorationImage(
            image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
          ),
        ),
      ),
    );
  }
}