Flutter之FutureBuilder的使用

FutureBuilder 是 Flutter 中用于构建基于 Future 返回的最新计算快照(Snapshot)的 Widget。使用 FutureBuilder 可以非常方便地根据异步计算的结果来创建 UI。

基本使用

FutureBuilder 主要有两个属性：

• future：我们要监听的 Future。
• builder：一个返回 Widget 的回调函数。这个函数的参数包括 BuildContext 和 AsyncSnapshot，其中 AsyncSnapshot 包含了 Future 的计算结果。

使用步骤

1. 定义一个 Future 函数

   这个函数通常用来进行一些异步操作，比如网络请求。

   Future<String> fetchData() async {
     await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟
     return "Data fetched";
   }
   

2. 使用 FutureBuilder

   将定义的 Future 函数与 FutureBuilder 一起使用，根据其执行的结果构建 UI。

   FutureBuilder<String>(
     future: fetchData(),
     builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
       // 判断 Future 是否执行结束
       if (snapshot.connectionState == ConnectionState.waiting) {
         return CircularProgressIndicator(); // 返回一个加载指示器
       } else {
         if (snapshot.hasError) {
           return Text('Error: ${snapshot.error}');
         } else {
           return Text('Data: ${snapshot.data}'); // 返回获取的数据
         }
       }
     },
   )
   

示例代码

下面是一个完整的简单示例，使用 FutureBuilder 显示从 Future 获取的数据。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FutureBuilder Example')),
        body: MyFutureBuilder(),
      ),
    );
  }
}

class MyFutureBuilder extends StatelessWidget {
  // 定义一个 Future 函数来模拟获取数据的操作
  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟
    return "Data fetched";
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder<String>(
        future: fetchData(),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          // 根据 snapshot 的状态返回不同的 Widget
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator(); // 如果 Future 还在运行，返回一个进度指示器
          } else {
            if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Data: ${snapshot.data}'); // 如果 Future 完成且无错误返回数据
            }
          }
        },
      ),
    );
  }
}

注意事项

• FutureBuilder 的 builder 方法可能会被多次调用，尤其是在 Future 函数执行的过程中，它可能会调用多次 builder 来重建 UI。
• 避免直接在 FutureBuilder 的 future 属性中创建 Future 实例。如果这样做，每次 build 方法执行时，都会创建一个新的 Future 实例，导致不必要的计算。通常将 Future 实例定义为 State 对象的成员变量或者使用 FutureBuilder 的静态构造方法 FutureBuilder.value。