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

发布于07月13日

说明:

我有一个包含两个小部件的堆栈.Widget1(作为背景)是由4个组件组成的网格，Widget2是Widget1顶部的半透明矩形彩色容器建筑.堆栈正在按预期构建这两个小部件！

问题:

Widget2是在Widget1之前进行视觉渲染的，这会导致尴尬的效果，因为Widget2是在空背景上渲染的.我假设这是由子堆栈异步构建引起的，然而AssetImage是一个同步调用...

问题:

如何使Widget2渲染等待widget1，直到widget1作为背景完全可见？

注意，我已经try 了WidgetBindings.例子addPostframeCallback

非常感谢，

解决方案1

我认为没有必要等待widget1.在显示widget1和widget2assets资源之前，可以使用precacheImage路预缓存它们.这样他们几乎马上就会表现出来.

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

从文档中，在调用precacheImage之后:

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

否则，可以使用Future.delayed等待widget1渲染.对delayed的调用应该是构建widget2的某个标志的setState，比如说bool _buildWidget2 = false标志.类似于以下代码段:

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

然后在Stack上应该是:

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