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

Question

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

我创建了一个简单的示例，用于计算 25 到 30 之间随机选择的数字的斐波那契数。在我的示例代码/应用程序中，点击“calc”按钮调用 _calc()。_calc() 选择一个随机数，设置与文本小部件 (_status) 相关联的状态消息“Calculating Fib of $num...”并使用 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 标记为需要重建，并且（没有 'sleep'）直接进入计算，从不给框架重建 Widget 的机会，因此不显示 'Calculating' 消息。计算后调用第二个 setState 并再次（冗余地）将 Widget 标记为需要重建。

所以，执行顺序是：

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

当我们取消对 'sleep' 的注释时，执行顺序更改为

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

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

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

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

对于计算绑定的东西，您需要第二个执行线程，这是通过Isolate. 隔离有自己的堆，因此您必须将数据传递给它，它在自己的空间中工作，然后传回一些结果。如果时间过长或用户取消等，您也可以停止它。

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