使用 loadingBuilder 时 Flutter Image.network 不显示?

Posted

技术标签:

【中文标题】使用 loadingBuilder 时 Flutter Image.network 不显示?【英文标题】:Flutter Image.network is not showing when using loadingBuilder? 【发布时间】:2021-02-13 13:04:41 【问题描述】:

我正在使用 Image.network 从网络加载图像。当我简单地传递 url 时,图像工作正常。它将在几秒钟后显示。但是当我使用 loadingBuilder 和 errorBuilder 时,图像被加载但不显示。我在 loadingBuilder 中创建的循环进度完成并消失,但没有显示图像。

这里是代码

Image.network(
      widget._imgLink,
      loadingBuilder: (context, child, loadingProgress) 
        return Center(
          child: CircularProgressIndicator(
            value: (loadingProgress != null)
                ? (loadingProgress.cumulativeBytesLoaded /
                    loadingProgress.expectedTotalBytes)
                : 0,
          ),
        );
      ,
      errorBuilder: (context, error, stackTrace) 
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Error loading"),
            FlatButton(onPressed: () , child: Text("Retry")),
          ],
        );
      ,
    ),

如何告诉小部件在加载后显示图像? 谢谢。

【问题讨论】:

您在loadingBuilder: (context, child, loadingProgress) 中根本没有使用child 参数 是否必须提供孩子以及如何使用? 见api.flutter.dev/flutter/widgets/Image/loadingBuilder.html 【参考方案1】:

loadingProgress 为空时,从loadingBuilder 返回child 将起作用。 示例:

loadingBuilder: (context, child, loadingProgress) 
        if(loadingProgress == null)
          return child;

        return Center(
          child: CircularProgressIndicator(
            value: (loadingProgress != null)
                ? (loadingProgress.cumulativeBytesLoaded /
                    loadingProgress.expectedTotalBytes)
                : 0,
          ),
        );
      ,

【讨论】:

【参考方案2】:

使用CachedNetworkImage 加载图像并提供错误和加载小部件。

dependencies:
  cached_network_image: ^2.3.3

代码:

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

【讨论】:

谢谢,但为什么我不能使用 Image.network 来提供这些功能。 你可以使用它,CachedNetworkImage 是一种更高级的显示网络图像的方式,它也提供缓存。 CachedNetworkImage 在flutter-web中不起作用,所以 Image.Network 仍然有价值。

以上是关于使用 loadingBuilder 时 Flutter Image.network 不显示?的主要内容,如果未能解决你的问题,请参考以下文章

使用相机包授予权限会在异常时暂停调试器

只有在 Flutter 应用程序上使用 Web 时,如何才能禁用某些功能?

Flutter - 单击时渲染新的小部件

自定义原材料按钮 - Flutter

键入另一个文本字段时,动态文本字段数据将丢失

Flutter 如何平滑地为标记设置动画?