Flutter图像缓存：图片正在重新加载

Question

Flutter图像缓存：图片正在重新加载

12

我正在制作一个壁纸应用程序，其中在GridView.builder中从列表中显示许多高清图像（约90张高清图像），但这些图像并未被缓存。当我上下滚动时，它们每次都会重新加载。我尝试使用普通的网络图像甚至是CachedNetworkImage，但结果相同。有什么解决办法吗？

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Fetch Data JSON"),),
        body: isLoading? Container(
            alignment: new Alignment(0, 0),
            child: CircularProgressIndicator(),
            decoration: new BoxDecoration(color: Color.fromARGB(230, 0, 0, 0)),)
            :
            Container(
            decoration: new BoxDecoration(color: Color.fromARGB(230, 0, 0, 0)),  
            child: new GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1,childAspectRatio:3),
              itemCount: list.length,
              padding: EdgeInsets.all(0.0),
              itemBuilder: (BuildContext context, int index) {
                final cacheimg = CachedNetworkImage(
                      imageUrl: list[index].imgcollectionsrcimage.toString(),
                      placeholder: new CircularProgressIndicator(),
                      errorWidget: new Icon(Icons.error, color: Colors.white,),
                      );

                return Stack(
                  children: <Widget>[


                    //new Image.network(list[index].imgcollectionsrcimage.toString())
/*
                    new CachedNetworkImage(
                      imageUrl: imgsrc1[index],
                      placeholder: new CircularProgressIndicator(),
                      errorWidget: new Icon(Icons.error, color: Colors.white,),
                      ),
*/

                    ////////////////////////////////////////////srcimage/////////////////////////////////////////////////
                    new GestureDetector(
                      //onTap: (){_gotoImageCollections(list[index].hreflink.toString());},

                      child: new Container (
                      child: Container(

                        decoration: BoxDecoration(
                        borderRadius: new BorderRadius.all(Radius.circular(5)),

                        image: DecorationImage(
                            //colorFilter: const ColorFilter.mode(const Color.fromARGB(150, 0, 0, 0), BlendMode.darken),
                            image: NetworkImage(list[index].imgcollectionsrcimage.toString()),
                            fit: BoxFit.cover,

                            ),

                        boxShadow: <BoxShadow>[new BoxShadow(color: const Color.fromARGB(150, 0, 0, 0),offset: new Offset(0.0, 3.0),blurRadius: 5.0)]
                            ),
                          ),
                        padding: EdgeInsets.all(2.0),

                      //decoration: BoxDecoration(boxShadow:<BoxShadow>[new BoxShadow(color: const Color.fromARGB(50, 0, 0, 0),offset: new Offset(0.0, 0.0),blurRadius: 0.0)]),
                      ),
                    ),
                                      ],
                  );
                  },
            ),
            )
     );
  }
}

视频：https://streamable.com/2xg13

- dheeraj reddy

你的图片是否太大了，导致延迟只是从磁盘加载它们所需的时间？ - Edman

@pskink 图像大小在300到800kb左右变化。 - dheeraj reddy

@Edman 这是我正在获取图片的网站 https://wallpaperplay.com/board/hetalia-nordics-wallpapers。我在我的移动浏览器中打开了该网址并向下滚动到底部，然后再次向上滚动，但没有看到任何重新加载的情况。也许这就是问题所在，有什么解决方案吗？ - dheeraj reddy

@pskink 图片宽度大约在1920到2500像素之间。 - dheeraj reddy

1

@RoyalGriffin 1920*2500*4 = 19200000 @RoyalGriffin 1920*2500*4 = 19200000 - pskink

显示剩余9条评论

4个回答

0

我正在从API获取数据，并使用cached_network_image：^3.2.3来显示图片。但是，如果我打开另一个内容不同的屏幕然后返回，仍然会出现闪烁。

原因是：当我们打开其他带有不同图片（大于2或3MB）的屏幕时，该图片会被加载到缓存中，而之前的图片则从缓存中移除。因此，当我们返回时会出现闪烁效果。而且，如果我们再次进入第二个页面，当该图片被存储在缓存中时，它也会出现闪烁，这样循环往复。

解决方法可以是：从API下载图片到本地存储，例如hive或sqlite，然后使用Image.asset()来显示图片。

- Sanny khan

0

答案是添加memCacheWidth和memCacheHeight:

CachedNetworkImage(memCacheHeight: height.toInt(), memCacheWidth: width.toInt());

- Nam Le

-1

将cacheExtent的值更改为9999，这对我有效

ListView.builder(cacheExtent: 9999)

- Mahmoud Mohsen

1

这是一种不好的做法。请参见此处为什么https://dev59.com/-VMH5IYBdhLWcg3w_WZ_#57361352 - pascalbros

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martyns · Accepted Answer

您可以使用以下方式自定义图像缓存的最大空间。

class CustomImageCache extends WidgetsFlutterBinding {
  @override
  ImageCache createImageCache() {
    ImageCache imageCache = super.createImageCache();
    // Set your image cache size
    imageCache.maximumSizeBytes = 1024 * 1024 * 100; // 100 MB
    return imageCache;
  }
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (kReleaseMode) {
     CustomImageCache();
  }
  runApp(MyApp());
}

这是为了覆盖Flutter内部的图片缓存，而不是CacheNetworkImage。Flutter默认使用100 MiB，因此您可以尝试更高的值。