【问题标题】:Flutter CircleAvatar backgroundImage not filling up the circleFlutter CircleAvatar backgroundImage没有填满圆圈
【发布时间】:2018-09-29 02:52:37
【问题描述】:

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

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

【问题讨论】:

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

标签: image flutter widget


【解决方案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,
              )
        

        【讨论】:

        • 解释你的答案
        猜你喜欢
        • 1970-01-01
        • 2021-08-04
        • 2020-04-30
        • 2021-04-21
        • 2016-03-27
        • 2020-09-19
        • 1970-01-01
        • 2020-09-07
        • 2016-12-04
        相关资源
        最近更新 更多