在创建Widget时执行异步操作

概述

经常看到有人在初始化widget的方法执行异步操作。这行不通,但是也很糟糕,因为每次状态或属性更新时都会调用它。这可能会导致很多不必要的工作。这时需要使用StatefulWidget来解决这个问题。

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

class MyWidgetState extends State<MyWidget> {
    var _result;

    @override
    void initState() {
        // 这里是执行异步操作的正确位置
        // 它只会被执行一次
        // 在开发过程中,如果更改此处代码,需要完全重启,而不仅仅是热加载
        // 不能在此处使用async / await
        // 由于该函数是@override,所以不能将此函数标记为异步
        // 你可以编写并执行以下函数的异步方法
        loadAsyncData().then((result) {
            //如果需要使用异步获取的数据重构组建,那需要在setState函数内使用
            setState(() {
                _result = result;
            });
        });
    }
    
    @override
    Widget build(BuildContext context) {
        if (_result == null) {
            // 这是加载时显示的内容
            return new Container();
        }
        
        // 在这里使用`_result`执行后续操作
        return new ResultWidget(_result);
    }
}

总结

  1. 用一个 StatefulWidget
  2. 在initState函数内执行异步操作
  3. 如果需要重新渲染页面,请在setState函数内执行
  4. 根据结果做后续操作

转载自:https://flutter.institute/run-async-operation-on-widget-creation