FutureBuilder

标签：return Center FutureBuilder Future snapshot loadData

FutureBuilder是一个可以自动追踪Future的状态并在其状态改变的时候自动重绘的组件。

FutureBuilder追踪Future的状态

1、定义一个模拟请求数据的异步方法 2、模拟数据加载的时候加载一个Indicator，数据加载完毕后显示数据

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<String> loadData() async {
    await Future.delayed(const Duration(seconds: 5)); // 等待2秒
// throw "404 错误"; // 若需测试异常情况，可把注释去掉
    return "这是一个远程的数据"; // 正常返回数据
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder(
        future: loadData(), // 读取网络数据，异步函数，返回一个Future类型  监听上面的方法loadData()
        builder: (BuildContext context, snapshot) {
          print("---------------------------");
          print(snapshot.connectionState);
          print("-------------===--------------");
// 检查ConnectionState是否为done，以此判断Future是否结束
          if (snapshot.connectionState == ConnectionState.done) {
// 当Future结束时，data和error必有一个不是空
            if (snapshot.hasError) {
// 判断是否有错误，有则显示错误
              return Center(
                child: Text("ERROR: ${snapshot.error}"),
              );
            } else {
// 没有错误，则显示数据
              return Center(child: Text("DATA: ${snapshot.data}"));
            }
          } else {
// Future还没结束，因此渲染一个圆形进度条
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

FutureBuilder initialData 配置初始化数据

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<String> loadData() async {
    await Future.delayed(const Duration(seconds: 5)); // 等待2秒
// throw "404 错误"; // 若需测试异常情况，可把注释去掉
    return "这是一个远程的数据"; // 正常返回数据
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder(
          future: loadData(), // 读取网络数据，异步函数，返回一个Future类型  监听上面的方法loadData()
          initialData: "我是一个初始化的数据",
          builder: (BuildContext context, snapshot) {
            if (snapshot.hasError) {
              //判断是否有错误
              return Center(
                child: Text("ERROR: ${snapshot.error}"), //有错误
              );
            } else {
              return Center(
                child:
                    Text("${snapshot.data}"), //先显示初始化的数据  ；然后显示loadData()里返回的数据
              );
            }
          }),
    );
  }
}

 

 

标签：return,Center,FutureBuilder,Future,snapshot,loadData
From： https://www.cnblogs.com/xbinbin/p/17969138