1. Container+BoxDecoration来实现圆角
Container(
width: 50.px,
height: 50.px,
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(headimageurl)),
borderRadius: BorderRadius.circular(25.px)
),
)
2. ClipOval 来实现圆角
ClipOval(
child: Image.network(
headimageurl,//图片url
width: 25.px,
height: 25.px,
fit: BoxFit.cover,
),
)
3. CircleAvatar 的 backgroundImage 属性实现圆角
CircleAvatar
是可以实现圆角的, 但是无法控制带下, 所以需要知道图片的具体尺寸,但是这对于开发中,不容易控制的, 所以我们可以配合Container或则SizedBox
作为外层容器来控制图片的大小,但是系统推荐我们使用SizedBox
, 从而实现控制图片圆角的目的
SizedBox(
width: 25.px,
height: 25.px,
child: CircleAvatar(
//当图片未加载出来时,显示的背景色
backgroundColor: Colors.white,
backgroundImage: NetworkImage(headimageurl) ,
radius: 25.px / 2,
),
)
4. ClipRRect组件为图片实现圆角
ClipRRect(
child: Image.network(imageurl,width: 235.px,height: 350.px,fit: BoxFit.cover,),
borderRadius: BorderRadius.circular(15),)
5. Card设置圆角
Card(
child: Image.network(headimageurl, width: 50.px,height: 50.px,),
//设置超出部分裁剪
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.px),
//设置边框
side: const BorderSide(width: 2.0),
),
)