在 Flutter 应用程序中预加载（所有）图像资源

Question

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

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

难道不应该有一种方法让这件事变得更容易、更通用吗？我的应用程序总共使用 1.5 MB 的图像数据（并且我在该数字中包含了 2.0 倍和 3.0 倍的升级版本）。50 KB 的 PNG 图像（并且没有升级版本）需要相当长的时间才能显示，在模拟器和快速设备上可能需要 300-600 毫秒。这些是本地资产，不是通过网络获取的。我觉得这很烦人，我很沮丧，没有更好的方法来处理这个问题吗？

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

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

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

我想要一个call or call带有字符串的“precacheAllImageAssets() precacheImage()`，以便每个引用相同资源的 Image.asset() 都会被缓存。

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

知道这是否可能吗？如果不可能——我是否遗漏了一些明显的东西，或者这可能是 Flutter 框架未来（可能）的改进？

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);
        }
      }
  });
}