Flutter Mobx-在构建过程中调用setState()或markNeedsBuild()

时间:2020-06-13 03:24:17

标签: flutter mobx

当我尝试从一个页面导航到另一个页面时,出现以下错误。经过一番研究,我发现了一些解决方案,例如在 SchedulerBinding.instance.addPostFrameCallback 内调用导航,但是即使在某些情况下能够解决问题,在这种情况下,它们也不起作用。

我正在使用带有三个AnimatedOpacity的IndexedStack来包装一个不同的页面。除了错误之外,IndexedStack呈现其内容的方式可能是吗? 似乎是因为它同时呈现所有页面,而仅显示当前索引。但是,如果我需要在具有相同状态的这些页面之间切换,该如何解决呢?我尝试过使用PageView,但是当从一页切换到另一页时,状态会丢失。

有人可以帮我吗?

════════ Exception caught by flutter_mobx ══════════════════════════════════════
The following MobXCaughtException was thrown:
setState() or markNeedsBuild() called during build.
This Observer widget cannot be marked as needing to build because the framework is already in the process of building widgets.  A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
  Observer
The widget which was currently being built when the offending call was made was:
  AnimatedOpacity

When the exception was thrown, this was the stack
#0      Element.markNeedsBuild.<anonymous closure> 
package:flutter/…/widgets/framework.dart:4167
#1      Element.markNeedsBuild 
package:flutter/…/widgets/framework.dart:4182
#2      ObserverElementMixin.invalidate 
package:flutter_mobx/src/observer_widget_mixin.dart:70
#3      ReactionImpl._run 
package:mobx/…/core/reaction.dart:119
#4      ReactiveContext._runReactionsInternal 
package:mobx/…/core/context.dart:345
...

构建方法:

@override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: index,
      children: <Widget>[
        AnimatedOpacity(
          key: Key('animatedOpacity_0'),
          opacity: index == 0 ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Page1(),
        ),
        AnimatedOpacity(
          key: Key('animatedOpacity_1'),
          opacity: index == 1 ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Page2(),
        ),
        AnimatedOpacity(
          key: Key('animatedOpacity_2'),
          opacity: index == 2 ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Page3(),
        ),
      ],
    );
  }

更新:

问题出现在第三个AnimatedOpacity上,如果我删除了AnimatedOpacity小部件,则不会发生问题,但我无法弄清楚原因。有人对此有一些解释吗?

0 个答案:

没有答案