原文:https://www.jianshu.com/p/3d8d547ce99d
/** * 发现不添加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", ), ), ), ) ), ], ),