Question

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

这是我正在使用的代码

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

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

Answer 1

这将起作用：您需要使用HIOptions options = new HIOptions(); HIChart chart = new HIChart(); chart.setType("column"); options.setChart(chart); HIExporting hiExporting = new HIExporting(); hiExporting.setEnabled(false); options.setExporting(hiExporting); List<BarChartSeries> seriesList = barChartModel.getSeries(); if (!seriesList.isEmpty()) { final HIXAxis xAxis = new HIXAxis(); HITitle xAxisTitle = new HITitle(); xAxisTitle.setText(getString(R.string.year)); xAxis.setTitle(xAxisTitle); XAxisDto xAxisDto = barChartModel.getxAxis(); List<String> stringList1 = xAxisDto.getCategories(); ArrayList<String> xAxisList = new ArrayList<>(); xAxisList.addAll(stringList1); xAxis.setCategories(xAxisList); xAxis.setCrosshair(new HICrosshair()); ArrayList<HIXAxis> axes = new ArrayList<>(); axes.add(xAxis); options.setXAxis(axes); HIYAxis yAxis = new HIYAxis(); yAxis.setMin(0); HITitle yAxisTitle = new HITitle(); yAxisTitle.setText(getString(R.string.no_of_cases)); yAxis.setTitle(yAxisTitle); ArrayList<HIYAxis> yaxes = new ArrayList<>(); yaxes.add(yAxis); options.setYAxis(yaxes); HITooltip tooltip = new HITooltip(); tooltip.setHeaderFormat("<span style=\"font-size:10px\">{point.key}</span><table>"); tooltip.setPointFormat("<span style=\"font-size:10px\">{point.key}</span><table>"); tooltip.setFooterFormat("</table>"); tooltip.setShared(true); tooltip.setUseHTML(true); options.setTooltip(tooltip); HIPlotOptions plotOptions = new HIPlotOptions(); HIColumn hiColumn = new HIColumn(); hiColumn.setPointPadding(0.2); hiColumn.setBorderWidth(0); plotOptions.setColumn(hiColumn); options.setPlotOptions(plotOptions); ArrayList<HISeries> dataSetList = new ArrayList<>(); if (seriesList.size() > 0) { for (int i = 0; i < seriesList.size(); i++) { BarChartSeries barChartSeries = seriesList.get(i); String name = barChartSeries.getName(); List<Data> dataList = barChartSeries.getData(); HIColumn series1 = new HIColumn(); series1.setName(name); List<String> stringList = xAxisDto.getCategories(); ArrayList<BarEntry> yVals = new ArrayList<BarEntry>(); ArrayList<Long> doubleArrayList = new ArrayList<>(); if (stringList != null) { for (int j = 0; j < stringList.size(); j++) { String cat = stringList.get(j); int count = 0; for (int ij = 0; ij < dataList.size(); ij++) { Data data = dataList.get(ij); if (data.getYear().equalsIgnoreCase(cat)) { count++; yVals.add(new BarEntry(ij, data.getCount())); doubleArrayList.add(data.getCount()); break; } } if (count == 0) { yVals.add(new BarEntry(yVals.size() + 1, 0)); doubleArrayList.add(0l); } } } series1.setData(doubleArrayList); dataSetList.add(series1); } } options.setSeries(dataSetList); ArrayList<HIColor> hiColors = new ArrayList<>(); hiColors.add(HIColor.initWithHexValue("FF0000")); hiColors.add(HIColor.initWithHexValue("FFA500")); hiColors.add(HIColor.initWithHexValue("808080")); options.setColors(hiColors); HITitle title = new HITitle(); title.setText(""); options.setTitle(title); HISubtitle subtitle = new HISubtitle(); subtitle.setText(""); options.setSubtitle(subtitle); HICredits hiCredits = new HICredits(); hiCredits.setEnabled(false); options.setCredits(hiCredits); chartView.setOptions(options);属性才能使其适合Circle。

backgroundImage:

要使用虚拟占位符进行检查：

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

Answer 2

AppBar操作小部件列表中存在类似的问题。

这对我有用：

CircleAvatar(
    radius: 18,
    child: ClipOval(
        child: Image.network(
          'image-url',
        ),
    ),
),

Answer 3

如果您不想使用CircleAvatar，请按以下步骤操作。

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

Answer 4

如果有人打算创建带边框的圆形图像，请尝试此操作。

使用ClipOval小部件不是完美的解决方案，因为如果图像不是正方形，结果将是椭圆形的。

CircleAvatar(radius: (52),
            backgroundColor: Colors.white,
            child: ClipRRect(
              borderRadius:BorderRadius.circular(50),
              child: Image.asset("assets/pictures/profile.png"),
            )
        )

ClipRRect小部件可防止图像溢出CircleAvatar小部件。

Answer 5

您将需要使用NetworkImage，AssetImage，FileImage，MemoryImage或类似名称。由于Flutter如何设计其图像类，因此您不能直接使用Image.network，Image.asset或类似名称。

一个例子：

CircleAvatar(
  radius: 100.0,
  backgroundImage: NetworkImage(...),
)

backgroundImage中的

CircleAvatar期望接收ImageProvider作为参数。但是，Image.network和其他人并没有直接扩展ImageProvider类，它们只是扩展了StatefulWidget类，即使它们在内部使用了NetworkImage。这就是为什么您在其他答案中看到正在使用ClipOval或ClipRRect的原因。这些类接受Widget，因此它们不像CircleAvatar那样特殊，类似的类也是如此。

因此，对于这些CircleAvatar，您应该使用NetworkImage和类似的类，而不是这些替代方法，对于只需要Widget的窗口小部件，您可以使用Image.network和类似。

不使用剪辑的另一个原因是，与直接更改边框半径相比，它们可能更昂贵：https://flutter.dev/docs/perf/rendering/best-practices

Answer 6

 CircleAvatar(
        radius: 26,
        backgroundColor: Colors.white,
        child: ClipOval(
          child: _bytesImage == null
              ? new Text('No image value.')
              : Image.memory(
                  _bytesImage,
                  width: 60,
                  height: 60,
                  fit: BoxFit.cover,
                ),
        ),
      ),

Answer 7

这对我有用

   CircleAvatar(
                  child:  ClipRRect(
                      borderRadius: new BorderRadius.circular(100.0),
                      child:Image.network("https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),
                ),),

Answer 8

以下在我的情况下有效：

child: new CircleAvatar(
        backgroundColor: Colors.white,
        child: ClipRect(
          child: Image.network(
            'url-to-image',
            fit: BoxFit.cover,
          ),
        ),
      )

Answer 9

如果要显示覆盖整个头像的整个宽度的图像，则可以像这样使用它。如果您的图片没有加载，它将显示默认人物图标。

 CircleAvatar(
              child: ClipOval(
                                  child: Center(
                                child: _image == null
                                    ? Icon(
                                        Icons.person,
                                        color: Colors.grey.shade700,
                                        size: 100,
                                      )
                                    : Image.file(
                                        _image,
                                        fit: BoxFit.cover,
                                        width: MediaQuery.of(context).size.width,
                                      ),
                              ),
                            ),

                          radius: 50,
                          backgroundColor: Colors.grey.shade300,
                        ),

Answer 10

在这种情况下，您可以使用：

CircleAvatar(radius: 50.0,backgroundImage: NetworkImage("https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),),

或

CircleAvatar(radius: 50.0,backgroundImage: AssetImage("assets/images/profile.jpg"),),

工作正常...

Answer 11

我有同样的问题。在圆头像中使用clipoval将使其变为椭圆形。但这解决了这个问题。

CircleAvatar(

             radius:25.0,

             backgroundImage: NetworkImage(
                        '${image_url}',


                        ),
                        backgroundColor: Colors.blue,
                            ),

Answer 12

你可以这样做

创建一个用户 Avtar 类

class Avatar extends StatelessWidget {
  Avatar(
    this.user,
  );
  final UserModel user;

  @override
  Widget build(BuildContext context) {
    if ((user?.photoUrl == '') || (user?.photoUrl == null)) {
      return LogoGraphicHeader();
    }
    return Hero(
      tag: 'User Avatar Image',
      child: CircleAvatar(
          foregroundColor: Colors.blue,
          backgroundColor: Colors.white,
          radius: 70.0,
          child: ClipOval(
            child: Image.network(
              user?.photoUrl,
              fit: BoxFit.cover,
              width: 120.0,
              height: 120.0,
            ),
          )),
    );
  }
}

然后像这样使用

Avatar(controller.firestoreUser.value),

Answer 13

花了一些尝试才能弄清楚这一点。.所有这些答案都对我没有帮助。在我插入到圆头像中的最后一幅图片中，该图片被拉伸到容器上方2个实例的边界。也许有些人在经过这里的答案之后仍然遇到我所遇到的问题。我用FittedBox

解决了约束问题

             GestureDetector(
                    onTap: () => getImage(),
                    child: Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(
                        color: Colors.orange,
                      ),
                      //padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                      child: Container(
                          width: 140,
                          height: 160,
                          child: FittedBox(
                            child: picture(),
                          )),
                    ),
                  ),

这是我使用的picture（）的代码。我认为picture（）内的容器不再是必需的，请自己尝试：）

Widget picture() {
if (_image == null) {
  return CircleAvatar(
      radius: 70,
      child: Icon(
        Icons.person,
        size: 150,
        color: Colors.grey[900],
      ));
} else {
  return Container(
    width: 140,
    height: 140,
    child: CircleAvatar(
      radius: 70,
      backgroundImage: FileImage(_image),
    ),
  );
}

Answer 14

如果有人试图在应用栏操作中添加圆形图像。请尝试以下解决方案，它应该可以工作。

         Padding(
            padding: const EdgeInsets.all(8.0),
            child: AspectRatio(
              aspectRatio: 1,
              child: CircleAvatar(
                backgroundImage: NetworkImage('https://picsum.photos/seed/picsum/200/500'),

              ),
            ),
          )

AspectRatio首先尝试布局约束（此处为应用栏）允许的最大宽度。如果我删除填充图像的半径将为appbar大小。因此，添加填充以控制圆形图像的大小。

Answer 15

Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => MyApp7()),
                      );
                    },
                    child: CircleAvatar(
                      radius: 50,
                      // backgroundColor: Colors.amber,
                      child: CircleAvatar(
                          backgroundColor: Colors.grey[50],
                          radius: 50,
                          // child: Image.asset("assets/images/nophotoMale.png")
                          backgroundImage:
                              AssetImage("assets/images/nophotoMale.png")),
                    ),
                  ),
                ],
              ),

Answer 16

在此解决方案中，您可以按容器调整图像大小，并按椭圆形剪辑图像，然后按卡为图像添加阴影。

Container(
  width: 100,
  height: 100,
  child: InkWell(
    onTap: () {},
    child: Card(
      elevation: 5,
      shape: RoundedRectangleBorder(
        side: BorderSide(color: Colors.grey),
        borderRadius: const BorderRadius.all(
          Radius.circular(45.0),
        ),
      ),
      child: Container(
        child: ClipOval(
            child: CachedNetworkImage(
          imageUrl: '{image-url}',
          imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.fill,
              ),
            ),
          ),
          placeholder: (context, url) => Container(
            height: 5,
            width: 5,
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            ),
          ),
          errorWidget: (context, url, error) => Icon(Icons.error),
        )),
      ),
    ),
  ));

Answer 17

就我而言，我使用的是 CachedNetworkImage 包。所以这就是我得到的。

                        CircleAvatar(
                            radius: 33,
                            child: ClipOval(
                              child: CachedNetworkImage(
                                imageUrl: snapshot.data,
                                imageBuilder: (context, imageProvider) =>
                                    Image.network(
                                  snapshot.data,
                                  fit: BoxFit.fill,
                                  height: 70,
                                  width: 70,
                                ),
                                placeholder: (context, url) => Center(
                                    child: CircularProgressIndicator()),
                                errorWidget: (context, url, error) => Text(
                                  _utils.getInitials(state.user.firstName +
                                      " " +
                                      state.user.lastName),
                                  style: TextStyle(
                                      fontSize: 15,
                                      fontWeight: FontWeight.w600),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                          );

输出：

Answer 18

使用 AvatarView lib https://pub.dev/packages/avatar_view，它提供了以圆形/矩形形式显示网络/资产图像的功能。

使用添加下面的依赖

dependencies:
  avatar_view: ^1.0.0+3

示例：

        AvatarView(
                  radius: 60,
                  borderColor: Colors.yellow,
                  avatarType: AvatarType.CIRCLE,
                  backgroundColor: Colors.red,
                  imagePath:
                  "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
                  placeHolder: Container(
                    child: Icon(Icons.person, size: 50,),
                  ),
                  errorWidget: Container(
                    child: Icon(Icons.error, size: 50,),
                  ),
                ),

它还提供了在小部件周围添加边框的功能，更多示例请访问上面的链接

输出：

Answer 19

这对我有用

Transform.scale(
        scale: 0.6,
        child: ClipOval(
          child: Image.network(
            <IMAGE URL HERE>,
          ),
        ),
      )

Answer 20

这对我有用：

 return Stack(
      children: [
        CircleAvatar(
          radius: 50.0,
          backgroundImage: NetworkImage(
              'https://i.pinimg.com/474x/0c/eb/c3/0cebc3e2a01fe5abcff9f68e9d2a06e4.jpg'),
        ),
      ],
    );

Answer 21

只需在backgroundImage内使用 CircleAvatar

 CircleAvatar(
      backgroundImage: AssetImage("assets/images/dia.jpg",),
    ),

Answer 22

我遇到了同样的问题

CircleAvatar(
             radius: 30.0,
             backgroundImage: NetworkImage(imageURL),
             backgroundColor: Colors.transparent,
             ));

解决了我的问题。

Answer 23

                    CachedNetworkImage(
                        placeholder: (context, url) => Center(
                              child: CircularProgressIndicator(),
                            ),
                        errorWidget: (context, url, error) =>
                            new Icon(Icons.error),
                        imageBuilder: (context, imageProvider) => Container(
                            width: 60.0,
                            height: 60.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                    image: imageProvider,
                                    fit: BoxFit.contain))),
                        fit: BoxFit.contain,
                        imageUrl:
                            "${Constants.MEDIA_LINK}${state.review.company.logo}"),

Answer 24

这是一个带有阴影的圆形图片：

child: AspectRatio(
    aspectRatio: 1/1,
    child: Container(
        margin: EdgeInsets.all(
            10.0
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100.0),
            boxShadow:[
              BoxShadow(
                  color: Color.fromARGB(60, 0, 0, 0),
                  blurRadius: 5.0,
                  offset: Offset(5.0, 5.0)
              )
            ],
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(user.image)
            )
        )
    )
)

Answer 25

  ClipOval(
     child: Image.asset(
      'assets/dummy.jpg',
       fit: BoxFit.contain,
       matchTextDirection: true,
       height: 50,
   ))

Answer 26

使用width/height，fit的组合并将图像包装在ClipOval中，如下所示：

CircleAvatar(
    child: ClipOval(
        child: Image.network(
            _photo,
            width: 120,
            fit: BoxFit.fill
        ),
    ),
    radius: 50,
),

Flutter网络映像不适用于圆形头像

26 个答案: