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
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试