简介

一般来说，Flutter的Widget分为有状态和无状态两种，大多数情况下够用了。
不过如果涉及到异步计算，build的方法后面加一个async是没有效果的，不论是有状态还是无状态的Widget都一样。比如，像下面这样用是不行的：

@override
Widget build(BuildContext context) async {
    await fetchData();
    return Container();
}

Future<String> fetchData() async {
    // 模拟一个网络请求，这里使用延迟来模拟
    await Future.delayed(Duration(seconds: 2));
    return 'Hello, Flutter!';
}

延时创建

在build方法中套一个FutureBuilder就可以处理这种情况。

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:async';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FutureBuilder Example'),
        ),
        body: Center(
          child: FutureBuilderDemo(),
        ),
      ),
    );
  }
}
 
class FutureBuilderDemo extends StatelessWidget {
  Future<String> fetchData() async {
    // 模拟一个网络请求，这里使用延迟来模拟
    await Future.delayed(Duration(seconds: 2));
    return 'Hello, Flutter!';
  }
 
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchData(),
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else if (snapshot.hasData) {
          return Text('Data: ${snapshot.data}');
        } else {
          return Text('No data');
        }
      },
    );
  }
}