/**
* 發(fā)現(xiàn)不添加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: <Widget>[
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