Image 圆角的几种处理方式:
1.利用Container组件的decoration属性实现
child: Container(
height: 300.0, //容器高度
width: 300.0, //容器宽度
decoration: BoxDecoration(
//装饰线
color: Colors.blue[600], //颜色
border: Border.all(
//边框
//color: Colors.deepOrange,
width: 2.0),
borderRadius: BorderRadius.all(
//边框半径
Radius.circular(150), //圆形
),
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
),
fit: BoxFit.cover,
repeat: ImageRepeat.noRepeat, //平铺模式
)),
),
2.利用裁剪组件ClipOval实现
child: Container(
height: 300.0, //容器高度
width: 300.0, //容器宽度
child: ClipOval(
child: Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
height: 100,
width: 100,
fit: BoxFit.cover,
),
),
注意
:这里设置ClipOval子组件为image,并对image设置宽高为100,但你会发现实际的image显示时会充满整个Container。