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
相关推荐
汉得数字平台15 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
mascon15 分钟前
U3D打包IOS的自我总结
ios
名字不要太长 像我这样就好21 分钟前
【iOS】继承链
macos·ios·cocoa
花海如潮淹22 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
karshey1 小时前
【IOS webview】IOS13不支持svelte 样式嵌套
ios
潜龙95271 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化