在构建之前预加载资产图像

Question

我试图将我的容器的背景图像设置为来自资产的图像，如下所示：

return new Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage(images[index]),
                fit: BoxFit.cover,
              ),
            ),

但这需要一些时间来加载和返回空白屏幕，直到图像加载..

所以我尝试在构建之前预加载图像，如下所示：

@override
void initState() {
precacheImage(new AssetImage(images[1]), context);
precacheImage(new AssetImage(images[2]), context);
precacheImage(new AssetImage(images[3]), context);
super.initState();
}

这返回了这个错误：

扑腾：？？？小部件库捕获的异常 ????????????????????????????????????????????? ??????????????? flutter：以下断言被抛出构建构建器：flutter：inheritFromWidgetOfExactType(MediaQuery) 或inheritFromElement() 在 flutter: _WalkthroughPageState.initState() 完成之前被调用。flutter: 当继承的widget发生变化时，例如Theme.of()的值发生变化，其依赖的flutter:widgets会被重建。如果依赖小部件对继承小部件的引用在构造函数 flutter: 或 initState() 方法中，那么重建的依赖小部件将不会反映 flutter: 继承小部件中的更改。flutter：通常对继承的小部件的引用应该出现在小部件 build() 方法中。或者，颤振：基于继承的小部件的初始化可以放在 didChangeDependencies 方法中，该方法 flutter: 在 initState 之后以及此后依赖项发生变化时调用。flutter: flutter: 当抛出异常时，这是堆栈：flutter: #0 StatefulElement.inheritFromElement。(package:flutter/src/widgets/framework.dart:3898:9) flutter: #1 StatefulElement.inheritFromElement (package:flutter/src/widgets/framework.dart:3931:6) flutter: #2 Element.inheritFromWidgetOfExactType (package :flutter/src/widgets/framework.dart:3274:14) flutter: #3 MediaQuery.of (package:flutter/src/widgets/media_query.dart:476:38) flutter: #4 createLocalImageConfiguration (package:flutter/src /widgets/image.dart:49:34) 颤动：#5 precacheImage (package:flutter/src/widgets/image.dart:81:37) 颤动：

Answer 1

我遇到了同样的问题，解决方案在错误描述中：

基于继承的小部件的初始化可以放在 didChangeDependencies 方法中，该方法在 initState 之后以及此后依赖项发生变化时调用。

这是我的代码的简化版本，在didChangeDependencies方法中预加载图像：

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

  Image currentImage;

  @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");

    currentImage = image1;
  }

  @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: currentImage,
    );
  }

  void setImage(int index) {
      switch (index) {
        case 1: currentImage = image1; break;
        case 2: currentImage = image2; break;
        case 3: currentImage = image3; break;
        case 4: currentImage = image4; break;
      }
  }
}

希望这可以帮助 ：）

Answer 2

我不确定，但我想，你可以尝试一下FutureBuilder

import 'dart:ui' as ui;

class MyImage extends StatelessWidget {
  MyImage(this._imgSrc);
  final String _imgSrc;

  @override
  Widget build(BuildContext context) {
    Image image = Image.asset(_imgSrc);
    Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image.resolve(ImageConfiguration()).addListener((ImageInfo info, bool _) {
      completer.complete(info.image);
    });
    return FutureBuilder(
        future: completer.future,
        builder: (context, AsyncSnapshot<ui.Image> snapshot) {
          return snapshot.hasData ? image : Container();
        });
  }