Flutter的圆形头像四种简单用法_flutter 圆形头像

一、ClipOval

该方式属于绘图功能，只能简单的显示圆形头像

//圆角头像1
//如果做圆形头像的话，必须是正方形，长方形则是椭圆形
//是剪裁布局中的一种,详情可看:https://www.cnblogs.com/sundaysme/p/12579525.html
//ClipRect 将 child 剪裁为给定的矩形大小
// ClipRRect 将 child 剪裁为圆角矩形
// ClipOval 如果 child 为正方形时剪裁之后是圆形，如果 child 为矩形时，剪裁之后为椭圆形
// ClipPath 将 child 按照给定的路径进行裁剪
// CustomClipper 并不是一个widget，但是使用CustomClipper可以绘制出任何我们想要的形状
// ClipRect 将 child 剪裁为给定的矩形大小
_buildAvatar1(){
  return ClipOval(
    child: Image.network('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7',width: 100,height: 100,),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二、CircleAvatar

该组件是Flutter自己提供的圆角头像，可以在头像上面添加一个组件

//     圆角头像2,Flutter提供的圆角头像控件，可以定制一些属性,如下:
//     this.child,控件，可以放个用户名
//     this.backgroundColor,//背景颜色
//     this.backgroundImage,//背景图片，头像可以放在这里，默认值不为透明
//     this.onBackgroundImageError,//背景加载错误时候的图片
//     this.foregroundColor,//前景色
//     这个控件需要给个宽高
_buildAvatar2(){
  return Container(
    width: 100,
    height: 100,
    child: CircleAvatar(
      child: Text('名字',
        style: TextStyle(
            color: Colors.blue
        ),),
      backgroundImage: NetworkImage('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7'),
    ),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、ClipRRect

该实现方式可以定制圆角弧度

///圆角头像3
_buildAvatar3(){
  return ClipRRect(
      child: Image.network('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7',width: 100,height: 100,),
      borderRadius:BorderRadius.circular(20)
  );
}
1
2
3
4
5
6
7

四、Container+BoxDecoration

该方式自定义程度最高

///圆角头像4
///难度最大，自由度最高，
///可以加边框，背景，渐变色
_buildAvatar4(){
  return Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7'),
      ),
      borderRadius: BorderRadius.circular(10),

    ),
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17