Question

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

我创建了一个简单的例子来计算25到30之间随机选择的数字的Fibonacci数。在我的示例代码/ app中，点击“calc”按钮调用_calc（）。 _calc（）选择一个随机数，设置一个状态消息“计算$ num的光纤...”绑定到文本小部件（_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标记为需要重建并且（没有'sleep'）继续直接进入计算，从不给框架重建Widget的机会，因此不会显示'Calculating'消息。在计算之后调用第二个setState，并再次（冗余地）将Widget标记为需要重建。

所以，执行顺序是：

将状态设置为“计算”，将“小工具”标记为“脏”
执行同步计算
将状态设置为Result，将Widget标记为脏（冗余）
框架终于有机会重建;构建方法称为

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

将状态设置为“计算”，将“小工具”标记为“脏”
'睡眠'，允许框架调用build
执行同步计算
将状态设置为Result，将Widget标记为脏（再次）
框架调用构建

（另外，请注意同步fib计算如何更快一个数量级，因为它不必进行所有微任务调度。）

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

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

对于计算绑定的内容，您需要使用Isolate获得second thread of execution。隔离区有自己的堆，所以你必须传递它的数据，它在自己的空间中运行，然后传回一些结果。你也可以停止它，如果它花费太长时间，或者用户取消等等。

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

Flutter setState（）不会调用总是调用我的构建方法

1 个答案: