如何确保异步数据获取完成后再执行Widget的build方法？

核心问题原因 #

构造函数和initState()都是同步执行的方法，你不能直接在这两个方法里使用await等待异步操作完成——即便你在内部调用了async标记的readRequiredData()方法，执行到await时方法会立即挂起返回，build()会提前执行，此时数据还未加载完成，自然会因缺少数据报错。

下面是几种可靠的解决方式：

方式一：使用FutureBuilder（最推荐） #

利用Flutter提供的FutureBuilder组件，它可以监听异步Future的状态变化，自动根据加载状态返回对应的Widget。

步骤如下：

1. 在Widget的状态类中定义一个Future变量，存储数据加载任务
2. 在initState()中启动数据加载任务并赋值给该变量
3. 在build()中返回FutureBuilder，根据AsyncSnapshot的状态处理加载中、成功、失败等场景

代码示例：

class YourView extends StatefulWidget {
  @override
  _YourViewState createState() => _YourViewState();
}

class _YourViewState extends State<YourView> {
  late Future<YourDataModel> _dataFuture;

  @override
  void initState() {
    super.initState();
    // 启动数据加载任务
    _dataFuture = readRequiredData();
  }

  // 异步数据获取方法
  Future<YourDataModel> readRequiredData() async {
    // 模拟数据库查询逻辑
    await Future.delayed(const Duration(seconds: 2));
    return YourDataModel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<YourDataModel>(
        future: _dataFuture,
        builder: (context, snapshot) {
          // 加载中：显示进度组件
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 加载失败：显示错误提示
          else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          // 加载成功：用数据构建业务Widget
          else if (snapshot.hasData) {
            final data = snapshot.data!;
            return YourContentWidget(data: data);
          }
          // 其他异常情况
          else {
            return const Center(child: Text('无数据'));
          }
        },
      ),
    );
  }
}

方式二：手动管理加载状态 #

通过状态变量标记数据是否加载完成，数据加载完成后调用setState()触发UI重建。

步骤如下：

1. 在状态类中定义布尔变量_isDataLoaded，初始值为false
2. 在initState()中调用异步数据获取方法，完成后更新_isDataLoaded并触发setState()
3. 在build()中根据_isDataLoaded的值，返回加载中组件或正常内容组件

代码示例：

class YourView extends StatefulWidget {
  @override
  _YourViewState createState() => _YourViewState();
}

class _YourViewState extends State<YourView> {
  bool _isDataLoaded = false;
  late YourDataModel _data;

  @override
  void initState() {
    super.initState();
    // 启动异步数据加载
    _loadData();
  }

  Future<void> _loadData() async {
    // 等待数据获取完成
    _data = await readRequiredData();
    // 标记数据加载完成，触发UI重建
    setState(() {
      _isDataLoaded = true;
    });
  }

  Future<YourDataModel> readRequiredData() async {
    // 数据库查询逻辑
    await Future.delayed(const Duration(seconds: 2));
    return YourDataModel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isDataLoaded 
          ? YourContentWidget(data: _data) // 数据加载完成，显示业务内容
          : const Center(child: CircularProgressIndicator()), // 加载中显示进度圈
    );
  }
}

方式三：结合MVC模式的分层处理 #

把数据获取逻辑放到Model层，让Model层暴露数据加载状态或回调，View层监听状态变化，符合MVC分层解耦的原则：

1. Model层提供异步方法获取数据，或通过Stream通知数据加载状态
2. View层的状态类监听Model的状态变化，数据准备好后调用setState()更新UI

代码示例（简化版）：

// Model层
class YourModel {
  Future<YourDataModel> fetchData() async {
    // 数据库查询逻辑
    await Future.delayed(const Duration(seconds: 2));
    return YourDataModel();
  }
}

// View层
class YourView extends StatefulWidget {
  @override
  _YourViewState createState() => _YourViewState();
}

class _YourViewState extends State<YourView> {
  final YourModel _model = YourModel();
  bool _isDataLoaded = false;
  late YourDataModel _data;

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

  Future<void> _loadDataFromModel() async {
    _data = await _model.fetchData();
    setState(() {
      _isDataLoaded = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isDataLoaded 
          ? YourContentWidget(data: _data)
          : const Center(child: CircularProgressIndicator()),
    );
  }
}

内容的提问来源于stack exchange，提问作者Abdul Haadi Alhassan