Flutter开发之圆形图片，圆角图片方案

圆形图片方案

方式一：CircleAvatar

CircleAvatar可以实现圆角头像，也可以添加一个子Widget：

const CircleAvatar({
  Key key,
  this.child, // 子Widget
  this.backgroundColor, // 背景颜色
  this.backgroundImage, // 背景图像
  this.foregroundColor, // 前景颜色
  this.radius, // 半径
  this.minRadius, // 最小半径
  this.maxRadius, // 最大半径
})

实现一个圆形头像：

• 注意一：这里我们使用的是NetworkImage，因为backgroundImage要求我们传入一个ImageProvider；
  • ImageProvider是一个抽象类，事实上所有我们前面创建的Image对象都有包含image属性，该属性就是一个ImageProvider
• 注意二：这里我还在里面添加了一个文字，但是我在文字外层包裹了一个Container；
  • 这里Container的作用是为了可以控制文字在其中的位置调整；

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("兵长利威尔")
        ),
      ),
    );
  }
}

image.png

方式二：ClipOval

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,
        ),
      ),
    );
  }
} 

image.png

方式三：Container+BoxDecoration

Container有一个非常重要的属性 decoration：
他对应的类型是Decoration类型，但是它是一个抽象类。
在开发中，我们经常使用它的实现类BoxDecoration来进行实例化。
BoxDecoration常见属性：

const BoxDecoration({
    this.color, // 颜色，会和Container中的color属性冲突
    this.image, // 背景图片
    this.border, // 边框，对应类型是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"),
          ),
        ),
      ),
    );
  }
}

image.png

圆角图片方案

方式一：ClipRRect

ClipRRect用于实现圆角效果，可以设置圆角的大小。
实现代码如下，非常简单：

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

�

image.png

方式二：Container+BoxDecoration

修改decoration属性的BoxDecoration的BorderRadius.circular(10)大小即可，与实现圆形类似

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(10),
          image: DecorationImage(
            image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
          ),
        ),
      ),
    );
  }
}

�

image.png