Question

我想在第一次查找后从缓存中检索图像，但由于我的 URL 存储在未来，似乎我每次都在等待未来，这反过来又导致 ProgressIndecator 显示即使图像被缓存。这有点违背了缓存的目的。

Flutter: CachedNetworkImage not caching image - TesteurManiak 在这篇文章中所说的似乎对我的情况有意义

这是我的代码

class ImageLayerWidget extends StatelessWidget {
  ImageLayerWidget({Key key, this.layer}) : super(key: key);

  final AsyncMemoizer<models.Image> _memorizer = AsyncMemoizer();
  final models.ImageLayer layer;

  Future<models.Image> _fetchData() async {
    return this._memorizer.runOnce(() async {
      return await StorageFile<models.Image>(path: layer.path).getDatatoRam();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: FutureBuilder(
          future: _fetchData(),
          builder: (BuildContext context, AsyncSnapshot snap) {
            if (snap.hasData) {
              return Image(
                image: CachedNetworkImageProvider(snap.data.path),
              );
            }
            return LinearProgressIndicator();
          },
        ),
      ),
    );
  }
}

我正在使用 AsyncMemoizer 缓存我的图像模型类，该类保存从 ref.getDownloadURL(); 检索的 URL。这似乎并没有真正的帮助。我希望它只在第一次获取时显示进度指示器，然后缓存图像，这样用户就不会再次看到该指示器。

我尝试了很多东西。有人可以帮忙吗？

更新：

正如 GrahamD 建议的那样，我也尝试过这个

class ImageLayerWidget extends StatefulWidget {
  ImageLayerWidget({Key key, this.layer}) : super(key: key);

  final models.ImageLayer layer;

  @override
  _ImageLayerWidget createState() => _ImageLayerWidget();
}

class _ImageLayerWidget extends State<ImageLayerWidget> {
  Future<models.Image> _future;

  Future<models.Image> _fetchData() async {
    return await StorageFile<models.Image>(path: widget.layer.path)
        .getDatatoRam();
  }

  @override
  void initState() {
    _future = _fetchData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: FutureBuilder(
          future: _future,
          builder: (BuildContext context, AsyncSnapshot snap) {
            if (snap.hasData) {
              return Image(
                image: CachedNetworkImageProvider(snap.data.path),
              );
            }
            return LinearProgressIndicator();
          },
        ),
      ),
    );
  }
}

不幸的是，它并没有解决问题。返回同一图像时，LinearProgressIndicator 始终显示。我也尝试将 _future 放在小部件的有状态部分，但也没有帮助。就好像快照每次都在解决未来。我什至在小部件树上传播了这种状态。仍然没有修复。我会继续尝试，但我认为这是我将 ChachedNetworkImage 与期货一起使用的方式。

在 Futurebuilder 中使用 CachedNetworkImage 在图像缓存后仍然显示进度指示器

0 个答案: