dart Flutter图像缓存:图像正在重新加载

beq87vna  于 2023-04-27  发布在  Flutter
关注(0)|答案(3)|浏览(132)

我正在制作一个壁纸应用程序,其中它显示了许多高清图像从列表中的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

bn31dyow

bn31dyow1#

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

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,因此您可以尝试更高的值。

lmyy7pcs

lmyy7pcs2#

将cacheExtent值更改为9999,它对我很有效

ListView.builder(cacheExtent: 9999)
1mrurvl1

1mrurvl13#

答案是加上memCacheWidthmemCacheHeight

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

相关问题