Flutter setState() 并不总是调用我的构建方法

Question

我正在试用 Flutter，但我无法让 UI 持续更新。我想在调用长时间运行的异步方法时显示一条状态消息，但是我在调​​用长时间运行的方法之前进行的 setState() 调用似乎不会导致我的 build() 方法被调用。

我创建了一个简单的示例，用于计算 25 到 30 之间随机选择的数字的斐波那契数。在我的示例代码/应用程序中，点击“calc”按钮调用 _calc()。 _calc() 选择一个随机数，设置状态消息“正在计算 $num 的 Fib ...”，并绑定到文本小部件 (_status) 并使用 setState() 更新它；然后调用 async _fib() 例程来计算数字；然后使用 setState() 用结果更新 _status。此外，build() 方法将 _status 的值打印到控制台，可用于查看何时调用 build()。

实际上，当按下按钮时，第一条状态消息既不会出现在调试控制台中，也不会出现在 UI 上。做了一些实验，我添加了一个伪睡眠函数，我在调用 _fib() 之前调用了它。 有时会导致第一个 setState() 调用正常工作 - 调用 build()。我睡得越久，它就越经常起作用。 （我使用的值从几毫秒到一整秒不等）。

所以我的问题是：我做错了什么？什么是正确的方法？使用伪睡眠显然不是正确的解决方案。

其他，可能不太相关的信息：我的开发环境是 Win10 机器上的 Android Studio 3.1.2。使用 Android SDK 27.0.3 和 Flutter beta 0.3.2。我的目标设备是运行 Android 8.1 的 pixel2 的模拟器。另外，很抱歉，如果我缺少“新”关键字令人不快，但从我在 Dart 2 发行说明中读到的内容来看，现在通常不需要。

import 'package:flutter/material.dart';
import "dart:async";
import "dart:math";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Debug Toy',
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  String _status = "Initialized";
  final rand = Random();

  Future sleep1() async {
    return new Future.delayed(const Duration(milliseconds: 100),() => "1");
  }

  Future<Null> _resetState() async {
    setState(() { _status = "State Reset"; });
  }

  Future<Null> _calc() async {
    // calculate something that takes a while
    int num = 25 + rand.nextInt(5);
    setState(() { _status = "Calculating Fib of $num..."; });

    //await sleep1(); // without this, the status above does not appear
    int fn = await _fib(num);

    // update the display
    setState(() { _status = "Fib($num) = $fn"; });
  }

  Future<int> _fib(int n) async {
    if (n<=0) return 0;
    if ((n==1) || (n==2)) return 1;
    return await _fib(n-1) + await _fib(n-2);
  }

  @override
  Widget build(BuildContext context) {
    print("Build called with status: $_status");
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Debug Toy')),
      body: Column(
        children: <Widget>[
          Container(
            child: Row(children: <Widget>[
              RaisedButton( child: Text("Reset"), onPressed: _resetState, ),
              RaisedButton( child: Text("Calc"), onPressed: _calc, )
            ]),
          ),
          Text(_status),
        ],
      ),
    );
  }
}

Answer 1

让我们先走一个极端，将fib重写为fibSync

  int fibSync(int n) {
    if (n <= 0) return 0;
    if (n == 1 || n == 2) return 1;
    return fibSync(n - 1) + fibSync(n - 2);
  }

然后调用它

  Future<Null> _calc() async {
    // calculate something that takes a while
    int num = 25 + rand.nextInt(5);
    setState(() {
      _status = "Calculating Fib of $num...";
    });

    //await Future.delayed(Duration(milliseconds: 100));

    int fn = fibSync(num);

    // update the display
    setState(() {
      _status = "Fib($num) = $fn";
    });
  }

第一个 setState 只是将 Widget 标记为需要重建，并且（没有“睡眠”）继续直接进行计算，从不给框架重建 Widget 的机会，因此不会显示“正在计算”消息.第二个 setState 在计算后被调用，并再次（冗余地）将 Widget 标记为需要重建。

所以，执行顺序是：

1. 将状态设置为计算中，将小部件标记为脏
2. 执行同步计算
3. 将状态设置为结果，将小部件标记为脏（冗余）
4. 框架终于有机会重建；构建方法被调用

当我们取消注释'sleep'时，执行顺序变为

1. 将状态设置为计算中，将小部件标记为脏
2. 'Sleep'，允许框架调用 build
3. 执行同步计算
4. 将状态设置为结果，将小部件标记为脏（再次）
5. 框架调用构建

（顺便说一句，请注意同步 fib 计算如何快一个数量级，因为它不必执行所有微任务调度。）

让我们重新考虑异步计算。使其异步的动机是什么？以便 UI 在计算期间保持响应？如您所见，这并没有达到预期的效果。您仍然只有一个执行线程，并且不允许在执行中出现任何间隙以发生回调和渲染。休眠 100 毫秒不受计算限制，因此可能会发生绘图等。

我们使用异步函数来等待外部事件，比如来自网络服务器的回复，在回复到达之前我们无事可做，我们可以利用这段时间来继续渲染显示、对手势做出反应等.

对于计算绑定的东西，您需要一个second thread of execution，这是通过Isolate 实现的。隔离区有自己的堆，因此您必须将其数据传递给它，它在自己的空间中工作，然后传回一些结果。您也可以停止它，如果它花费的时间太长，或者用户取消等。

（计算 fibs 的计算成本要低得多，但我想我们正在使用递归版本作为 O(n^2) 函数的一个很好的例子，对吧？）