我正在尝试在 CircleAvatar 小部件的下拉列表中显示这些头像。但是,如下图所示,该图像在 CircleAvatar 中不合适。我尝试裁剪它们并更改大小,但它仍然放大了图像。任何帮助,将不胜感激。下面是我用来在下拉列表中显示的头像列表的代码。
List<AvatarItem> avatars = <AvatarItem>[
const AvatarItem(avatarString: 'female_avatar_1.png', avatar: Center(
child: Padding(
padding: const EdgeInsets.all(3.0),
child: CircleAvatar(backgroundImage: AssetImage('assets/female_avatar_1.png'), backgroundColor: Colors.white, radius: 30.0,),
),
)),
const AvatarItem(avatarString: 'male_avatar_1.png', avatar: Center(
child: Padding(
padding: const EdgeInsets.all(3.0),
child: CircleAvatar(backgroundImage: AssetImage('assets/male_avatar_1.png'), backgroundColor: Colors.white, radius: 30.0,),
),
)),
const AvatarItem(avatarString: 'female_avatar_2.png', avatar: Center(
child: Padding(
padding: const EdgeInsets.all(3.0),
child: CircleAvatar(backgroundImage: AssetImage('assets/female_avatar_2.png'), backgroundColor: Colors.white, radius: 30.0,),
),
)),
const AvatarItem(avatarString: 'male_avatar_2.png', avatar: Center(
child: Padding(
padding: const EdgeInsets.all(3.0),
child: CircleAvatar(backgroundImage: AssetImage('assets/male_avatar_2.png'), backgroundColor: Colors.white, radius: 30.0,),
),
)),
const AvatarItem(avatarString: 'gn_avatar.png', avatar: Center(
child: Padding(
padding: const EdgeInsets.all(3.0),
child: CircleAvatar(backgroundImage: AssetImage('assets/gn_avatar.png'), backgroundColor: Colors.white, radius: 30.0,),
),
)),
];
最佳答案
我遇到了同样的问题,只是根据评论找到了答案。这是我使用 FittedBox(也带有 BoxDecoration 边框)的类似示例代码,供其他需要的人使用 :)
return Container(
child: FittedBox(
fit: BoxFit.contain,
child: CircleAvatar(
radius: 60,
backgroundImage: AssetImage('assets/images/$image'),
),
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.pinkAccent.withOpacity(0.80),
width: 6,
),
),
);
关于flutter - 图像在 flutter 中放大为 CircleAvatar 小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60713124/