Flutter之FutureBuilder的使用

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

基本使用

FutureBuilder 主要有两个属性:

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

使用步骤

  1. 定义一个 Future 函数

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

    dart 复制代码
    Future<String> fetchData() async {
      await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟
      return "Data fetched";
    }
  2. 使用 FutureBuilder

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

    dart 复制代码
    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 获取的数据。

dart 复制代码
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 完成且无错误返回数据
            }
          }
        },
      ),
    );
  }
}

注意事项

  • FutureBuilderbuilder 方法可能会被多次调用,尤其是在 Future 函数执行的过程中,它可能会调用多次 builder 来重建 UI。
  • 避免直接在 FutureBuilderfuture 属性中创建 Future 实例。如果这样做,每次 build 方法执行时,都会创建一个新的 Future 实例,导致不必要的计算。通常将 Future 实例定义为 State 对象的成员变量或者使用 FutureBuilder 的静态构造方法 FutureBuilder.value
相关推荐
excel35 分钟前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼1 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
HarderCoder3 小时前
iOS 知识积累第一弹:从 struct 到 APP 生命周期的全景复盘
ios
hj5914_前端新手5 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法5 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku5 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode5 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu5 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu5 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu5 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript