面试题：Flutter中如何在异步操作完成后安全地更新UI

Question

在Flutter应用里，假设你有一个异步函数`fetchData`用于从网络获取数据，获取完成后需要更新UI来展示数据。请描述使用`Future`和`setState`结合的方式实现这一过程的步骤，并说明为什么要在`setState`中更新UI。

Answer 1

1. 定义异步函数fetchData：

   Future<List<dynamic>> fetchData() async {
     // 模拟网络请求
     await Future.delayed(Duration(seconds: 2));
     return ['data1', 'data2', 'data3'];
   }
   

2. 在StatefulWidget的State类中定义数据变量和加载数据的方法：

   class MyHomePageState extends State<MyHomePage> {
     List<dynamic> _data = [];
     Future<void> _loadData() async {
       List<dynamic> result = await fetchData();
       setState(() {
         _data = result;
       });
     }
   

3. 在合适的地方调用_loadData方法： 例如在initState方法中调用，这样页面一加载就开始获取数据。

   @override
   void initState() {
     super.initState();
     _loadData();
   }
   

4. 在UI中展示数据：

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: ListView.builder(
         itemCount: _data.length,
         itemBuilder: (context, index) {
           return ListTile(
             title: Text(_data[index].toString()),
           );
         },
       ),
     );
   }
   

为什么要在setState中更新UI：

• Flutter的StatefulWidget的状态改变时需要调用setState方法。setState方法会通知Flutter框架，该State对象的状态已经改变，框架会重新调用build方法来重建UI。
• 如果不在setState中更新UI相关数据，Flutter框架不会知道数据发生了变化，也就不会触发UI的重建，UI将不会展示更新后的数据。