Flutter中CircleAvatar小部件内的图像缩放

Question

我想在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,),
      ),
    )),
  ];

- Salwa Badreddine

---

你为什么要在AvatarItem中包装CircleAvatar？难道不能直接使用CircleAvatar吗？ - LonelyWolf

你也可以尝试在AssetImage中添加fit: BoxFit.cover。对我来说，通常使用cover或fitHeight就可以了。 - Nolence

@LonelyWolf 那只是一个带有avatarString和avatar属性的内置类。我只是使用avatarString将其与后端的正确头像相关联。 - Salwa Badreddine

@Nolence 我刚刚使用了child属性而不是backgroundImage，这样我就可以使用具有fit属性的Image.asset，然后它就起作用了。 - Salwa Badreddine

@Nolence 的意思是将 CircleAvatar 放入 FittedBox 中，然后调用 fit: BoxFit.cover 或 BoxFit.fitHeight。 - hoangquyy

Answer 1

我曾经遇到过同样的问题，根据评论找到了答案。这是我的类似示例代码，使用了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,
    ),
  ),
);

- Kdon

Answer 2

在我的情况下，通过将CircleAvatar包裹在Column中，问题得到解决。

Column(
  children: [
    CircleAvatar(
      radius: 50,
      backgroundColor: Colors.grey[400],
      backgroundImage: NetworkImage(
          'https://alphatar.vercel.app/api/og?s=A&hex=ffdd00&size=100'),
    )
  ],
),

- iqfareez