一、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,),
);
}
二、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'),
),
);
}
三、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)
);
}
四、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),
),
);
}