12.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的作用是为了可以控制文字在其中的位置调整；

classHomeContentextendsStatelessWidget{

@override

Widget build(BuildContext context) {

returnCenter(

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

),

),

);

}

}

方式二：ClipOval

ClipOval也可以实现圆角头像，而且通常是在只有头像时使用

classHomeContentextendsStatelessWidget{

  @override

  Widget build(BuildContext context) {

    return Center(

      child: ClipOval(

        child: Image.network(

          "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",

          width: 200,

          height: 200,

        ),

      ),

    );

  }

}

3.3.2. 实现圆角图片

ClipRRect用于实现圆角效果，可以设置圆角的大小。

实现代码如下，非常简单：

classHomeContentextendsStatelessWidget{

  @override

  Widget build(BuildContext context) {

    return Center(

      child: ClipRRect(

        borderRadius: BorderRadius.circular(10),

        child: Image.network(

          "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",

          width: 200,

          height: 200,

        ),

      ),

    );

  }

}