Flutter UI 在异步操作上挂起

Ted*_*ddy 6 user-interface asynchronous flutter

如何正确构造以下代码?我启动了一个昂贵的异步操作。“runExpenseOperation”方法停止旋转的 CircularProgressIndicator,因此看起来它是在主线程上执行的。是否有像原生 iOS 上的“dispatch_async”之类的东西?

class _MyHomePageState extends State<MyHomePage> {

  void _pressed() async {
    print("I am pressed");
    print("I will make a cheap operation now");
    await runExpensiveOperation();
  }

  Future<void> runExpensiveOperation() async  {
    print('starting expensive operation');
    for (var i = 0; i<1000000; i++) {
      List<int> bytes = utf8.encode('somethingtohash');
      String hash = sha256.convert(bytes).toString();
    }
    print('finished expensive operation');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(),
            FlatButton(
              child: Text("Press me for tough operation"),
              onPressed: _pressed,
            )
          ],
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

Cop*_*oad 6

class _MyHomePageState extends State<MyHomePage> {

  void _pressed() async {
    print("I am pressed");
    print("I will make a cheap operation now");

    // string returned is "Good Morning"
    String string = await compute(runExpensiveOperation, null); // this is what you need
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(),
            FlatButton(
              child: Text("Press me for tough operation"),
              onPressed: _pressed,
            )
          ],
        ),
      ),
    );
  }
}

// make sure this is outside your class definition 
Future<String> runExpensiveOperation(void _) async  {
  print('starting expensive operation');
  for (var i = 0; i<1000000; i++) {
      List<int> bytes = utf8.encode('somethingtohash');
      String hash = sha256.convert(bytes).toString();
  }
  print('finished expensive operation');
  return "Good Morning";
}
Run Code Online (Sandbox Code Playgroud)

  • 首先,我确实给出了一个可接受的答案标记,因为它运行良好并且达到了我的预期。其次,我真的不明白为什么会这样。“_pressed”中的“await”是否允许主线程上的事件循环继续操作?为什么主线程在等待时没有被阻塞? (2认同)
  • @CopsOnRoad 如何将参数传递给隔离并执行昂贵的操作?另一个问题是如何监听从isolate发送的消息并在UI中显示更新的响应?比如说下载进度 (2认同)