如何同步堆栈构建顺序*而不是Z顺序

Question

描述：

我有一个有两个小部件的堆栈。Widget1 (作为背景)是由4 AssetImages组成的网格，Widget2是Widget1顶部的半透明矩形容器建筑。Stack正在像预期的那样构建两个小部件！

问题：

Widget2是在Widget1之前可视化呈现的，这导致了一个尴尬的效果，因为Widget2是在一个空的背景上呈现的。我假设这是由子程序的堆栈异步构建引起的，但是AssetImage是一个同步调用.

问题：

如何使Widget2呈现等待widget1，直到Widget1完全可视化作为背景？

注意，我已经尝试过WidgetBindings.instance.addPostframeCallback了

非常感谢，

Answer 1

解决方案1

我认为没有必要等待widget1。在显示widget1和widget2资产之前，可以先用precacheImage方式对它们进行预缓存。这样，他们几乎马上就会出现。

await precacheImage(AssetImage('assets/widget1.png'), context);
await precacheImage(AssetImage('assets/widget2.png'), context);

在precacheImage调用之后

如果图像稍后被Image、BoxDecoration或FadeInImage使用，它可能会被加载得更快。图像的使用者不需要使用相同的ImageProvider实例。只要两个图像共享相同的密钥，并且图像由缓存保存，ImageCache就会找到图像。

解决方案2

否则，您可以使用Future.delayed来等待widget1的呈现。对delayed的调用应该是构建widget2的一些标志的setState，比如bool _buildWidget2 = false标志。类似于下面的代码片段：

Future.delayed(
  Duration(milliseconds: 150),
  () => setState(() => _buildWidget2 = true),
);

然后在Stack上应该是这样的：

Stack(
  children: [
    Widget1(),
    if (_buildWidget2)
      Widget2(),
  ],
)

Answer 2

如果是我，使用计时器调用widget2延迟(进程动画)

或者我想我还是用imageProvider吧。

https://api.flutter.dev/flutter/painting/ImageProvider-class.html