image - 在 Flutter 应用程序中预加载(所有)图像资源

Question

我想要一种简单的方法来预加载/缓存我所有的静态图像 Assets ，以便可以毫不延迟地呈现/提供它们。

我看到有一个 precacheImage() 调用可用于预加载/缓存 AssetImage。这需要一个上下文，建议在 didChangeDependencies() 覆盖中调用它。

难道不应该有一种方法可以使这更容易和更通用吗？我的应用程序总共使用了 1.5 MB 的图像数据(我在该数字中包括了 2.0 倍和 3.0 倍的放大版本)。 50 KB 的 PNG 图像(没有放大版本)需要大量时间才能显示，在模拟器和快速设备上可能需要 300-600 毫秒。这些是本地 Assets ，不是通过网络获取的。我觉得这很烦人，我很沮丧，因为没有更好的方法来处理这个问题？

我也看到了使用 FadeInImage 的提示，但同样 - 这并不是我真正想要的。

我在无状态小部件(自定义按钮)中显示图像。在无状态小部件 afaik 中使用 precacheImage 是不可能的。所以我需要在我的父小部件中构建 Image.asset()，调用 precacheImage，然后将图像小部件传递到我的无状态小部件并在构建中渲染它——这很麻烦。

此外，图像将显示在不同的地方(不同的父控件)。有时小部件之间的图像小部件大小不同，因为大小是 Image.asset() 的参数，我想我需要预缓存每个唯一的大小并传递这些预缓存的图像小部件。是否可以告诉 Flutter “缓存”PNG 的数据，以便在请求 Image.asset 时从缓存中读取 PNG，而不必传递预缓存的图像小部件？

我想要一个带有字符串的“precacheAllImageAssets()调用或调用precacheImage()`，这样每个引用相同 Assets 的 Image.asset() 都会被缓存。

我猜想 Flutter 在内部缓存图像小部件(包括它的大小和其他属性)作为缓存的一些内部渲染对象。因此，预缓存同一图像的两个不同大小将需要两个不同的缓存。话虽如此 - 我仍然想要一个 precacheAllImageAssets() 调用，它至少可以将 PNG 数据读入内存并更快地提供它，即使需要做一些处理来获取 PNG 数据到一个实际的小部件，在它可以被渲染之前有一个大小。有了这样的缓存，我可以获得 < 50 毫秒的渲染延迟，而不是当前的 300-600 毫秒。

知道这是否可能吗？如果不可能 - 我是否遗漏了一些明显的东西，或者这可能是 Flutter 框架的(可能) future 改进？

Answer 1

这里是我类似的precacheAllImageAssets()，但是你需要自己列出所有的图片路径。

final   List _allAsset = [
  ///tabbar
      'images/tabbar/tabar_personal.png',
      'images/tabbar/tabar_personal_slt.png',
      'images/tabbar/tabar_home.png',
      'images/tabbar/tabar_home_slt.png',
      'images/...'
      'images/...'
}

void main() {
  final binding = WidgetsFlutterBinding.ensureInitialized();

  binding.addPostFrameCallback((_) async {
    BuildContext context = binding.renderViewElement;
    if(context != null)
      {
        for(var asset in _allAsset)
        {
          precacheImage(AssetImage(asset), context);
        }
      }
  });
}