Flutter 图像放大到Flatter中的CircleAvatar小部件

Flutter 图像放大到Flatter中的CircleAvatar小部件,flutter,Flutter,我试图在CircleAvatar小部件的下拉列表中显示这些化身。但是,如下图所示,该图像在CircleAvatar中未正确拟合。我试着裁剪它们并改变大小,但它仍然被放大到图像中。任何帮助都将不胜感激。下面是我用来在下拉列表中显示的化身列表的代码 List<AvatarItem> avatars = <AvatarItem>[ const AvatarItem(avatarString: 'female_avatar_1.png', avatar: Cente

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

List

我也有同样的问题,只是根据评论找到了答案。下面是我的类似示例代码,它使用FittedBox(也带有BoxDecoration的边框)供需要的其他人使用:)


你为什么要用阿凡达来包装CircleAvatar?您不能只使用CircleAvatar吗?您也可以尝试在资产负债表中添加
fit:BoxFit.cover
cover
fitHeight
通常是为我做的。@LonelyWolf这只是一个内置的类,具有AvataString和avatar属性。我只是在使用avatarString将其与正确的虚拟角色关联backend@NolenceAssetImage不适合property@Nolence也就是说,将CircleAvatar放入FittedBox,然后称为fit:BoxFit.cover或BoxFit.fitHeight
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,
    ),
  ),
);