Question

在我的应用程序中使用的这段代码中，我想在滚动网格视图期间缓存图像，基本上是在滚动网格视图时导致重新加载图像并导致滚动过程中速度变慢

有什么方法可以像GridView一样在将图像放入ImageCache之前缓存图像？

StreamBuilder<List<MediaModel>>(
  stream: _globalBloc.storageMediaBloc.imagesMedia$,
  builder: (context, snapshot) {
    final List<MediaModel> _allImages = snapshot.data;
    _allImages.map((image) => mediaFoldersList.add(MediaDropDownStructure(image.folder, image.folder)));
    final MediaModel _all = _allImages[1];
    return GridView.builder(
      controller: scrollController,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 5.0,
        crossAxisSpacing: 5.0,
      ), //change the numb
      itemBuilder: (context, index) {
        return AspectRatio(
            aspectRatio:1.0,
            child: Image(image: FileImage(File('${_all.files[index]}')),fit: BoxFit.cover,));
      },
      itemCount: _all.files.length,
    );
  }
),

Answer 1

我不确定，尝试将读取的文件移出网格生成器：

  StreamBuilder<List<MediaModel>>(
  stream: _globalBloc.storageMediaBloc.imagesMedia$,
  builder: (context, snapshot) {
    final List<MediaModel> _allImages = snapshot.data;
    _allImages.map((image) => mediaFoldersList.add(MediaDropDownStructure(image.folder, image.folder)));
    final List<File> _all = _allImages[1].map((path) => File(path));

    return GridView.builder(
      controller: scrollController,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 5.0,
        crossAxisSpacing: 5.0,
      ), //change the numb
      itemBuilder: (context, index) {
        return AspectRatio(
            aspectRatio:1.0,
            child: Image(image: FileImage(_all[index]),fit: BoxFit.cover,));
      },
      itemCount: _all.files.length,
    );
  }
),

Answer 2

我遇到了与您类似的问题，即使图像存储在本地，图像也在不断重新渲染。

return AspectRatio(
        aspectRatio:1.0,
        child: Container(key: Key("1234"), child:Image(image: FileImage(File('${_all.files[index]}')),fit: BoxFit.cover,)))

我发现，通过添加Key("1234")之类的随机密钥可以防止图像重新渲染。

请尝试解决方案，让我知道它是否有效。

从外部存储中检索时，缓存图像抖动

2 个答案: