调整图片大小以适应圆形头像

Question

我试图在一个圆形头像小部件中显示用户的个人资料图片，但只有一小部分被显示出来。

CircleAvatar(
  radius: 70,
  backgroundImage: AssetImage("Images/headshot_1.jpg"),
)

我试图展示的图片

模拟器截图:

更新: 我将圆形头像包裹在行小部件中，已经解决了问题。

- Twix1983

---

你尝试过使用：BoxFit.contain 了吗？ - Ward Suleiman

Answer 1

将 CircleAvatar 组件用 Center 组件包装起来。

Center(child:CircleAvatar())

- Thào A Vảng

---

那个很酷。 - Asbah Riyas

这个好像像魔法一样工作，但我不知道为什么它能工作。如果可能的话，请详细解释一下。 - prince david

Answer 2

我会尝试使用 foregroundImage 。正如官方文档所述，这个属性非常适合你的用例：个人头像。

以下是一个使用你在问题中展示的图片的示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            foregroundImage: AssetImage(
              'myimage.png',
            ),
          ),
        ),
      ),
    );
  }
}

编辑。添加了获得的用户界面。

这是我得到的： 如果您的问题仍然存在，则问题可能出现在您的上下文/小部件树中的其他地方。

- venir

---

我仍然使用foregroundImage得到相同的效果。 - Twix1983

你尝试使用“child”属性了吗？ - venir

我尝试过但没有成功，后来我通过将圆形头像包装在行小部件中使其正常工作。 - Twix1983

你能否更新一下你在原问题中想要“头像化”的真实图像，这样我就可以进行实验吗？使用一些虚拟图像，它在我的端上是有效的。 - venir

嗨，我用那个代码更新了我的问题，并附上了我得到的内容。你的问题可能取决于你的其他小部件树/上下文。 - venir

Answer 3

You should be using the [`child`](https://api.flutter.dev/flutter/material/CircleAvatar-class.html#child) property, which takes another widget.

CircleAvatar(
  radius: 70,
  child: Image.asset(
    "Images/headshot_1.jpg",
    fit: BoxFit.cover,
    height: 140,
    width: 140,
  ),
);

我尝试运行了你的代码，结果显示出来是一个圆形。我使用了https://www.flaticon.com/free-icon/avatar_168724中的512像素。

你应该检查一下你正在使用的头像图片。

- Rahul

---

谢谢，但最终它给了我一个正方形的图像。 - Twix1983

你能否将你正在绘制的图像粘贴到CircleAvatar内部？ - Rahul

Answer 4

CircleAvatar(
  radius: 70,
  child: Image.asset('assets/1.png',
fit :BoxFit.cover,
),
)
                            

- Gbenga B Ayannuga

---

CircleAvatar 没有 fit 参数。 - Adnan

使用backgroundImage图像代替使用child参数。 - Gbenga B Ayannuga