dart 如何解决CachedNetworkImage中的错误?

yftpprvb  于 2024-01-03  发布在  其他
关注(0)|答案(4)|浏览(289)

我想加载一个图像缓存.所以我使用CachedNetworkImage的.当用户通过gmail帐户登录我得到的图像URL和显示的图像.但我需要把它保存在缓存.这里是我的代码:

  1. new Center(
  2. child: new Column(
  3. children: <Widget>[
  4. new CircleAvatar(
  5. new CachedNetworkImage(
  6. placeholder: CircularProgressIndicator(),
  7. imageUrl: widget.currentUser?.profilUrl,
  8. ),
  9. ),
  10. ],
  11. ),
  12. )

字符串
我也使用了CachedNetworkImageProvider,但两者都出现了相同的错误。错误是

  1. type'CachedNetworkImage'is not a subtype of type 'ImageProvider<dynamic>'

yptwkmov

yptwkmov1#

控件CircleAvatar接收ImageProvider
cached_network_image包为您提供了两个用途:

  1. CachedNetworkImage一个Widget,可用于显示缓存的网络镜像。
  2. CachedNetworkImageProvider一个ImageProvider,提供缓存的镜像。
    因此,如果你想把它传递给CircleAvatar,你必须使用CachedNetworkImageProvider(2.)。
    下面是一个完整的示例,您可以复制和粘贴以进行尝试:
  1. import 'package:flutter/material.dart';
  2. import 'package:cached_network_image/cached_network_image.dart';
  3. void main() => runApp(MyApp());
  4. class MyApp extends StatelessWidget {
  5. @override
  6. Widget build(BuildContext context) {
  7. return MaterialApp(
  8. theme: ThemeData(),
  9. home: Scaffold(
  10. body: Center(
  11. child: CircleAvatar(
  12. backgroundImage: CachedNetworkImageProvider(
  13. 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Bill_Gates_Buys_Skype_%285707954468%29.jpg/2560px-Bill_Gates_Buys_Skype_%285707954468%29.jpg'
  14. ),
  15. ),
  16. ),
  17. )
  18. );
  19. }
  20. }

字符串

展开查看全部
gkl3eglg

gkl3eglg2#

CircleAvatar backgroundImage属性需要ImageProvider,而不是图像小部件。

ImageProviders:- NetworkImage()、AssetImage()和CachedNetworkImageProvider()。
图片控件:- Image()、CircleAvatar()、CachedNetworkImage()

所以CircleAvatar()& CachedNetworkImage()也是一个图像显示窗口小部件,与我们通常使用的Image()窗口小部件相同。
每个图像显示小部件都需要图像提供程序。所以在这种情况下,您必须使用CircleAvatar()小部件和CachedNetworkImageProvider(),因为此CachedNetworkImageProvider()提供CircleAvatar()小部件所需的图像数据。

kxxlusnw

kxxlusnw3#

我不知道它是否可以帮助别人,但他提到如何处理网络图像错误。我通常使用**Image.Network(Flutter build widget)**来处理此类错误。这是一个例子

  1. Image.network(
  2. products[index].image!,
  3. errorBuilder: (BuildContext context,Object exception,StackTrace
  4. stackTrace) {
  5. return Image.asset('img/no_image.png');
  6. },)

字符串
如果未成功找到网络映像,则errorbuilder有助于显示另一个映像。

0wi1tuuw

0wi1tuuw4#

就像@Niklas说的。
小部件CircleAvatar接收ImageProvider。
以下是用途:

  1. new Center(
  2. child: new Column(
  3. children: <Widget>[
  4. new CircleAvatar(
  5. backgroundImage: new CachedNetworkImageProvider(
  6. widget.currentUser?.profilUrl,
  7. )
  8. ),
  9. ],
  10. ),
  11. )

字符串

展开查看全部

相关问题