[译]Flutter for Android Developers - Async UI

在Flutter中，我们可以使用FutureBuilder来处理异步数据，它可以在数据加载过程中显示一个loading状态，当数据加载完成后，自动切换到显示数据的状态。

以下是一个简单的示例，展示如何使用FutureBuilder来处理异步UI：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: fetchData(), // 异步获取数据的方法
        builder: (context, snapshot) {
          // 如果数据还没有加载完成，显示loading
          if (!snapshot.hasData) return Center(child: CircularProgressIndicator());
 
          // 如果数据已经加载完成，显示数据内容
          return Center(
            child: Text(
              'Loaded data: ${snapshot.data}', // 假设获取到的数据是一个字符串
            ),
          );
        },
      ),
    );
  }
 
  // 模拟一个异步获取数据的函数
  Future<String> fetchData() async {
    // 实际应用中这里会有网络请求或者其他耗时操作
    await Future.delayed(Duration(seconds: 2)); // 模拟延时
    return 'Sample Data'; // 模拟返回数据
  }
}

在这个例子中，我们定义了一个fetchData函数来模拟异步获取数据的过程。在FutureBuilder的future属性中，我们传入了这个函数。FutureBuilder的builder属性是一个Build函数，它根据数据是否已经加载来构建不同的UI。如果数据还没加载完成，它会显示一个进度指示器；如果数据已经加载完成，它会显示加载的数据内容。这样，我们就可以在Flutter中实现异步数据加载的流畅体验。