【问题标题】: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。

【问题讨论】:

标签: dart flutter


【解决方案1】:

你可以使用

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

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

【讨论】:

  • 这应该被接受,因为它保留了所有 CachedNetworkImage 功能。
  • @heyab-redda :)
【解决方案2】:

您可以使用CachedNetworkImageimageBuilder

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
          猜你喜欢
          • 1970-01-01
          • 2023-01-14
          • 2020-02-23
          • 1970-01-01
          • 1970-01-01
          • 2018-10-30
          • 2021-12-07
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多