使用 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 不显示?的主要内容,如果未能解决你的问题,请参考以下文章