Flutter：连续构建资源密集型小部件

Question

我有一个

Stack

，带有多个键

AnimatedPositioned

。
每个

AnimatedPositioned

都有一个

child

和一些资源密集型小部件

HeavyToBuildWidget

。

我不想详细说明

HeavyToBuildWidget

如何优化，我们假设它需要~2ms来构建。
现在我想创建 1000 个

HeavyToBuildWidget

- 正如预期的那样，构建视图需要 2000 毫秒。

是否可以“安排”小部件构建，以便每秒仅渲染 5 个

HeavyToBuildWidget

？它确实>>不是<< matter, if it takes ~200 seconds to build, but the 2000ms jank is not acceptable and i'd rather like to spread the heavy workload. I'm very careful with

setState

，我不会重建它们。

请不要详细讨论如何改进

HeavyToBuildWidget

的构建时间。

Answer 1

在

statefullWidget

中放置一个包含

AnimatedPositioned

小部件列表的属性：

List<AnimatedPositioned> stackWidgets = [];

然后，在 initState 回调中，您运行定期的

Stream

:

initState(){
  super.initState();
  Stream.periodic(duration: Duration(seconds: 5),).listen((){
    setState(() {
      stackWidgets.add(/*value*/); // add one of the 1000 widgets.
      stackWidgets.add(/*value*/); // add another.
      stackWidgets.add(/*value*/); // add another.
      stackWidgets.add(/*value*/); // add another.
      stackWidgets.add(/*value*/); // add another.
    });
  });
}

每 5 秒，屏幕就会更新：另一个项目将添加到堆栈中。

Answer 2

1. 如果所有内容都在单个屏幕上可见 - 尝试使用

   StatelessWidget

   带有

   const

   关键字，以便 flutter 可以复用。
2. 如果所有内容不需要在单个屏幕上可见（需要 滚动查看所有项目）使用

   ListView.builder(...)

   或

   GridView.builder(...)

   或任何

   Sliver

   变体。