Question

我正在制作一个墙纸应用程序，其中它在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

Answer 1

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

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 {
  CustomImageCache();
  runApp(MyApp());
}

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

Answer 2

将cacheExtent值更改为9999，它对我有用

ListView.builder(cacheExtent: 9999)

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

2 个答案: