/**
* 发现不添加Align时，CircleAvatar并没有显示为圆形，
* 设置child为要显示的url时，并不能显示为圆形，只有设置backgroundColor或者backgroundImage时才显示为了圆形
* radius和minRadius与maxRadius不能同时使用;
* ClipOval不在Align里面时也不能显示为圆形，ClipOval中image设置为fit: BoxFit.fill才能显示为圆形；
* BoxDecoration不在Align里面时也不能显示为圆形，BoxDecoration中image设置为fit: BoxFit.fill才能显示为圆形；
*
const CircleAvatar({
Key key,
this.child,
this.backgroundColor,//背景色，相当于加载中或加载失败的占位图
this.backgroundImage,//背景图，相当于加载中或加载失败的占位图
this.foregroundColor,//前景色，
this.radius,
this.minRadius,
this.maxRadius,
})
*/
body: ListView(
padding: EdgeInsets.all(20.0),
children: [
CircleAvatar(
child: Image.network(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
// backgroundColor: Color(0xffff0000),
// backgroundImage: NetworkImage(
// "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
radius: 40.0,
// foregroundColor: Color(0x55000000),
),
Align(
child: CircleAvatar(
child: Image.network(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
// backgroundImage: new NetworkImage(
// "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
backgroundColor: Color(0xffff0000),
radius: 40.0,
),
),
//圆行图片
Align(
child: CircleAvatar(
// child: Image.network(
// "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
backgroundImage: NetworkImage(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
backgroundColor: Color(0xffff0000),
radius: 40.0,
),
),
Align(
child: CircleAvatar(
// child: Image.network(
// "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
backgroundImage: NetworkImage(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
foregroundColor: Color(0xffff0000),
radius: 40.0,
),
),
Align(
child: ClipOval(
child: SizedBox(
width: 80.0,
height: 80.0,
child: Image.network(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
fit: BoxFit.fill,),
),
),
),
Align(
child: Container(
width: 80.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
),
),
),
)
),
//圆角图片
Align(
child: Container(
margin: EdgeInsets.only(top: 10.0),
width: 80.0,
height: 80.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: Image.network(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
fit: BoxFit.fill,
),
),
),
),
Align(
child: Container(
margin: EdgeInsets.only(top: 10.0),
width: 80.0,
height: 100.0,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5.0),
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
),
),
),
)
),
],
),
码云地址：https://gitee.com/xgljh/Flutter.git