dart 构建前预加载资源图像

yr9zkbsy  于 5个月前  发布在  其他
关注(0)|答案(4)|浏览(30)

我尝试将容器的背景图像设置为这样的资产的图像：

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

字符串
但这将需要一些时间来加载和返回空白whilte屏幕，直到图像加载。
所以我试着在构建之前预加载图像如下：

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

型
这返回了这个错误：

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ flutter: The following assertion was thrown building Builder: flutter: inheritFromWidgetOfExactType(MediaQuery) or inheritFromElement() was called before flutter: _WalkthroughPageState.initState() completed. flutter: When an inherited widget changes, for example if the value of Theme.of() changes, its dependent flutter: widgets are rebuilt. If the dependent widget's reference to the inherited widget is in a constructor flutter: or an initState() method, then the rebuilt dependent widget will not reflect the changes in the flutter: inherited widget. flutter: Typically references to to inherited widgets should occur in widget build() methods. Alternatively, flutter: initialization based on inherited widgets can be placed in the didChangeDependencies method, which flutter: is called after initState and whenever the dependencies change thereafter. flutter: flutter: When the exception was thrown, this was the stack: 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) flutter: #5 precacheImage (package:flutter/src/widgets/image.dart:81:37) flutter: #6 _WalkthroughPageState.initState (package:spl/Pages/walkthrough.page.dart:65:5) flutter: #7 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3808:58) flutter: #8 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #9 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #10 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #11 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #12 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #13 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #14 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #15 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #16 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #17 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14) flutter: #18 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #19 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #20 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14) flutter: #21 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #22 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #23 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14) flutter: #24 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #25 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #26 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #27 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #28 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #29 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3826:11) flutter: #30 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #31 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #32 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #33 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14) flutter: #34 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #35 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #36 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #37 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #38 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #39 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #40 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #41 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #42 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14) flutter: #43 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #44 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #45 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #46 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #47 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #48 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3826:11) flutter: #49 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #50 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #51 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #52 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #53 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #54 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #55 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #56 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #57 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #58 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14) flutter: #59 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #60 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #61 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #62 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #63 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #64 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #65 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #66 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #67 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #68 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #69 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #70 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3826:11) flutter: #71 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #72 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #73 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #74 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #75 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #76 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5) flutter: #77 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3826:11) flutter: #78 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5) flutter: #79 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14) flutter: #80 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12) flutter: #81 RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:4621:32) flutter: #82 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4953:17) flutter: #83 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #84 _TheatreElement.update (package:flutter/src/widgets/overlay.dart:507:16) flutter: #85 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #86 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #87 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #88 StatefulElement.update (package:flutter/src/widgets/framework.dart:3856:5) flutter: #89 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #90 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #91 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #92 ProxyElement.update (package:flutter/src/widgets/framework.dart:3968:5) flutter: #93 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #94 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4845:14) flutter: #95 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #96 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #97 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #98 StatefulElement.update (package:flutter/src/widgets/framework.dart:3856:5) flutter: #99 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #100 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4845:14) flutter: #101 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #102 SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4845:14) flutter: #103 Element.updateChild (package:flutter/src/widgets/framework.dart:2742:15) flutter: #104 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16) flutter: #105 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5) flutter: #106 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2286:33) flutter: #107 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:676:20) flutter: #108 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5) flutter: #109 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) flutter: #110 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) flutter: #111 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5) flutter: #112 _invoke (dart:ui/hooks.dart:151:13) flutter: #113 _drawFrame (dart:ui/hooks.dart:140:3) flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════

dart

4条答案

按热度按时间
bwleehnv

bwleehnv1#

我遇到了同样的问题，解决方案是在错误描述本身：
基于继承的小部件的初始化可以放在didChangeDependencies方法中，该方法在initState之后以及此后依赖关系发生变化时调用。
下面是我的代码的简化版本，在方法 * didChangeductions * 中预加载图像：

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

字符串
希望这对你有帮助：）

赞(0）分享  回复(0）举报  5个月前
bfhwhh0e

bfhwhh0e2#

我不确定，但我想，你可以试试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();
        });
  }

字符串

赞(0）分享  回复(0）举报  5个月前
ulydmbyx

ulydmbyx3#

这是因为precacheImage正在用函数createLocalImageConfiguration创建一个ImageConfiguration对象，而这个函数访问一些InheritedWidget。
在构造函数或initState方法中访问InheritedWidget可能会很棘手。
下面是createLocalImageConfiguration函数，它访问InheritedWidget

ImageConfiguration createLocalImageConfiguration(BuildContext context, { Size? size }) {
  return ImageConfiguration(
    bundle: DefaultAssetBundle.of(context),
    devicePixelRatio: MediaQuery.maybeOf(context)?.devicePixelRatio ?? 1.0,
    locale: Localizations.maybeLocaleOf(context),
    textDirection: Directionality.maybeOf(context),
    size: size,
    platform: defaultTargetPlatform,
  );
}

字符串
为了避免这种情况，正如错误消息所建议的和Alex Domenici所回答的那样，您可以将此代码移动到didUpdateWidget方法中。

赞(0）分享  回复(0）举报  5个月前
yebdmbv4

yebdmbv44#

从pub.dev安装此插件

cached_network_image: ^3.3.0

字符串
示例：-

CachedNetworkImage(
                      height: 80,
                      width: 80,
                      // this is network image
                      imageUrl: reviewModel.carfrontImage!,
                      // preload assets images before build
                      errorWidget: (context, url, error) => Image.asset(
                        'assets/image/red_car.png',
                        height: 80,
                        width: 80,
                      ),
                    ),

型

赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com