Flutter 中的 Round CachedNetworkImage答案

【问题标题】：Round CachedNetworkImage in FlutterFlutter 中的 Round CachedNetworkImage
【发布时间】：2018-06-13 16:09:23
【问题描述】：

new Container(

                  width: 80.0,
                  height: 80.0,
                  decoration: new BoxDecoration(

                      shape: BoxShape.circle,
                      image: new DecorationImage(
                          fit: BoxFit.fill,
                          image: new NetworkImage(widget.profile_picture)))),

目前我有一个 NetworkImage，但我希望有一个圆形的 CachedNetworkImage。

【问题讨论】：

如果你想使用Container你可以把Container放在imageBuilder的CachedNetworkImage里面，如下图所示：(github.com/Baseflow/flutter_cached_network_image/issues/…)

标签： dart flutter

【解决方案1】：

你可以使用

ClipRRect(borderRadius: BorderRadius.circular(10000.0),
child: CachedNetworkImage(...))

由于 CachedNetworkImageProvider 不是 Widget，它不能代替 CachedNetworkImage。这意味着它不会有占位符小部件选项。

【讨论】：

这应该被接受，因为它保留了所有 CachedNetworkImage 功能。
@heyab-redda :)

【解决方案2】：

您可以使用CachedNetworkImage 的imageBuilder：

CachedNetworkImage(
    imageUrl: imageUrl,
    imageBuilder: (context, imageProvider) => Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(50)),
            image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.cover,
            ),
        ),
    ),
    placeholder: (context, url) => placeholder,
    errorWidget: (context, url, error) => errorWidget,
)

为了得到圆角图像，请将宽度和高度设置为相同的值，并将borderRadius 设置为高度的一半。

【讨论】：

【解决方案3】：

你应该试试

ClipOval(
   child: CachedNetworkImage(
       imageUrl: url,
       fit: BoxFit.cover
   ),
)

【讨论】：

【解决方案4】：

您可以像这样使用CachedNetworkImageProvider：

new Container(
    width: 80.0,
    height: 80.0,
    decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: new CachedNetworkImageProvider(widget.profile_picture),
            ),
          ),
        ),

【讨论】：

太好了，谢谢！另外，有没有机会使用它：placeholder: new CircularProgressIndicator(), ?
您可以使用 FadeInImage 并将 CachedNetworkImageProvider 设置为其图像。它将为您提供占位符和淡入淡出选项。

【解决方案5】：

边框半径和边框颜色

第一种方式

Container(
   decoration: BoxDecoration(
     border: Border.all(color: Palette.greyTextColor),
     borderRadius: BorderRadius.all(Radius.circular(8.0)),),
                  child:  ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    child: CachedNetworkImage(

第二种方式

CachedNetworkImage(
                       imageBuilder: (context, imageProvider) => Container(
                         width: width,
                         decoration: BoxDecoration(
                           border: Border.all(color: Palette.greyTextColor),
                           borderRadius: BorderRadius.all(Radius.circular(8.0)),
                           image: DecorationImage(image: imageProvider),
                         ),
                       ),

【讨论】：

【解决方案6】：

我用它来创建一个带有边框颜色的圆形缓存图像网络

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class CircularCachedNetworkImage extends StatelessWidget {
  final String imageURL;
  final double size;
  final Color borderColor;
  final BoxFit fit;
  final double borderWidth;

  const CircularCachedNetworkImage({
    required this.imageURL,
    required this.size,
    required this.borderColor,
    this.fit = BoxFit.fill,
    this.borderWidth = 2,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: borderColor,
        shape: BoxShape.circle,
      ),
      child: Padding(
        padding: EdgeInsets.all(borderWidth),
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white, // inner circle color
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(300.0)),
            child: CachedNetworkImage(
              imageUrl: imageURL,
              fit: fit,
            ),
          ),
        ),
      ),
    );
  }
}

用法

CircularCachedNetworkImage(
   imageURL: "your image URL in here",
   size: 100,
   borderColor: Colors.green,
)

【讨论】：

【解决方案7】：

你只需要添加clipBehavior：Clip.antiAlias，

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。