Flutter CircleAvatar backgroundImage没有填满圆圈

Posted 2023-02-23

【中文标题】Flutter CircleAvatar backgroundImage没有填满圆圈

【英文标题】：Flutter CircleAvatar backgroundImage not filling up the circle

【发布时间】：2018-09-29 02:52:37

【问题描述】：

我正在使用带有backgroundImage 属性的CircleAvatar 来加载从相机拍摄的图像，但显示的图像没有填满整个圆形头像。它看起来像一个圆形的矩形图像。

如何使图像扩大以覆盖圆形头像？谢谢。

【问题讨论】：

方形图片正确地适合头像，但矩形图片不适合。请使用方形图片而不是 reactangle

【参考方案1】：

您始终可以创建图像并手动对其进行剪辑：

ClipOval(
  child: Image.network(
    "url.jpg",
    fit: BoxFit.cover,
    width: 90.0,
    height: 90.0,
  )
),

【参考方案2】：

这是我的工作示例：

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,
                    ),
                  ),
                ],
              ))

【参考方案3】：

如果您使用的是资产中的本地图像，那么您可以使用 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,
     ));

【参考方案4】：

CircleAvatar(
        child: Image.network(
          items.logo,
          fit: BoxFit.fill,
        ),
        backgroundColor: Colors.transparent,
        radius: 30,
      )

【讨论】：

解释你的答案