Flutter 网络图像不适合圆形头像 [英] Flutter Network Image does not fit in Circular Avatar

问题描述

我正在尝试从 api 中检索一堆图像.我希望图像以圆形形式显示，因此我使用 CircleAvatar 小部件，但我一直以方形格式获取图像.这是图片的截图

I am trying to retrieve bunch of images from an api. I want the images to be displayed in Circular form so I am using CircleAvatar Widget, but I keep getting images in square format. Here is a screenshot of images

这是我正在使用的代码

ListTile(leading: CircleAvatar(child: Image.network("${snapshot.data.hitsList[index].previewUrl}",fit: BoxFit.scaleDown,)),),

我尝试使用 BoxFit 的所有属性，例如 cover、contain、fitWidth、fitHeight 等，但它们都不起作用.

I tryied using all the properties of BoxFit like cover, contain,fitWidth,fitHeight etc but none of them works.

推荐答案

This Will Work : 您需要使用 backgroundImage: 属性以使其适合 Circle.

This Will Work : You need to use backgroundImage:property in order to fit it in Circle.

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
                backgroundColor: Colors.transparent,
              )

使用虚拟占位符检查:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )

这篇关于Flutter 网络图像不适合圆形头像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！