【发布时间】:2018-09-29 02:52:37
【问题描述】:
我正在使用带有backgroundImage 属性的CircleAvatar 来加载从相机拍摄的图像,但显示的图像没有填满整个圆形头像。它看起来像一个圆形的矩形图像。
如何使图像扩大以覆盖圆形头像?谢谢。
【问题讨论】:
-
方形图片正确地适合头像,但矩形图片不适合。请使用方形图片而不是 reactangle
我正在使用带有backgroundImage 属性的CircleAvatar 来加载从相机拍摄的图像,但显示的图像没有填满整个圆形头像。它看起来像一个圆形的矩形图像。
如何使图像扩大以覆盖圆形头像?谢谢。
【问题讨论】:
您始终可以创建图像并手动对其进行剪辑:
ClipOval(
child: Image.network(
"url.jpg",
fit: BoxFit.cover,
width: 90.0,
height: 90.0,
)
),
【讨论】:
这是我的工作示例:
Stack(
fit: StackFit.expand,
children: <Widget>[
CircleAvatar(
radius: 30.0,
backgroundImage:
NetworkImage("https://via.placeholder.com/150/92c952"),
backgroundColor: Colors.transparent,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Image.asset(
'assets/photo-camera.png',
width: 20.9,
height: 19.9,
),
),
],
))
【讨论】:
如果您使用的是资产中的本地图像,那么您可以使用 CircleAvatar,
CircleAvatar(
backgroundImage: ExactAssetImage('assets/images/cook.jpeg'),
// Optional as per your use case
// minRadius: 30,
// maxRadius: 70,
),
如果您使用的是网络图像,那么您可以使用 CircleAvatar 作为,
CircleAvatar(
radius: 30.0,
backgroundImage: NetworkImage(imageURL),
backgroundColor: Colors.transparent,
));
【讨论】:
CircleAvatar(
child: Image.network(
items.logo,
fit: BoxFit.fill,
),
backgroundColor: Colors.transparent,
radius: 30,
)
【讨论】: