颤动图像预加载

Question

是否有可能以某种方式预加载应用程序启动时的图像？就像我在我的抽屉里,但对于第一次当我打开抽屉有一个背景图片可以看我的图像闪烁喜欢它是从资产获取并显示,它给不好的经历对我来说,一旦我看到它用于其他第一次抽屉的开口表现得如预期的那样,因为它是缓存的.我想在app load上预取它,所以没有这样的效果.

Answer 1

precacheImage在构建抽屉之前,使用该功能开始加载图像.例如,在包含抽屉的小部件中:

class MyWidgetState extends State<MyWidget> {

  @override
  void initState() {
    // adjust the provider based on the image type
    precacheImage(new AssetImage('...'));
    super.initState();
  }

}

Answer 2

关于这个主题有一篇很好的文章：https : //alex.domenici.net/archive/preload-images-in-a-stateful-widget-on-flutter

它应该看起来像这样

class _SampleWidgetState extends State<SampleWidget> {
  Image image1;
  Image image2;
  Image image3;
  Image image4;

  @override
  void initState() {
    super.initState();

    image1 = Image.asset("assets/image1.png");
    image2 = Image.asset("assets/image2.png");
    image3 = Image.asset("assets/image3.png");
    image4 = Image.asset("assets/image4.png");
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    precacheImage(image1.image, context);
    precacheImage(image2.image, context);
    precacheImage(image3.image, context);
    precacheImage(image4.image, context);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
          child: Stack(
            children: <Widget>[
              image1,
              image2,
              image3,
              image4,
            ],
          ),
        );
  }
}

Answer 3

要摆脱“闪烁”，您可以简单地将FadeInImage类与 结合使用transparent_image，它会消失而不是立即出现。在您的情况下，用法如下所示：

// you need to add transparent_image to your pubspec and import it
// as it is required to have the actual image fade in from nothing
import 'package:transparent_image/transparent_image.dart';
import 'package:flutter/material.dart';

...
  FadeInImage(
    placeholder: MemoryImage(kTransparentImage),
    image: AssetImage('image.png'),
  )

Answer 4

我在initState中使用precacheImage（）的上部解决方案遇到了问题。下面的代码解决了它们。另请注意，您可能在调试模式下看不到预期的结果，而仅在发布模式下见到。

Image myImage;

  @override
  void initState() {
    super.initState();
    myImage= Image.asset(path);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    precacheImage(myImage.image, context);
  }

Answer 5

该precacheImage()函数（在大多数答案中使用）返回 a Future，对于某些用例场景，它可能非常有用。例如，在我的应用程序中，我需要加载外部图像，并且像其他人一样不想体验闪烁。所以我最终得到了这样的结果：

// show some sort of loading indicator
...

precacheImage(
    NetworkImage(),
    context,
).then((_) {
    // replace the loading indicator and show the image
    // (may be with some soothing fade in effect etc.)
    ...
});

请注意，在上面的示例中，我想说明如何Future潜在地使用 。评论只是为了帮助表达想法。实际实施必须以某种Fluttery方式完成。