首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter FutureBuilder始终返回null

Flutter FutureBuilder是一个用于构建基于异步操作的UI的小部件。它接收一个Future作为输入,并根据Future的状态来构建不同的UI。当Future正在加载数据时,FutureBuilder会显示一个加载指示器;当Future成功返回数据时,FutureBuilder会根据返回的数据构建UI;当Future发生错误时,FutureBuilder会显示错误信息。

FutureBuilder的构造函数如下:

代码语言:txt
复制
FutureBuilder<T>(
  future: Future<T>, // 异步操作的Future
  builder: (BuildContext context, AsyncSnapshot<T> snapshot) {
    // 根据异步操作的状态构建UI
  },
)

在builder函数中,我们可以根据AsyncSnapshot的状态来构建不同的UI。AsyncSnapshot包含以下几个属性:

  • connectionState:表示异步操作的当前状态,可以是none、waiting、active、done中的一个。
  • data:表示异步操作成功返回的数据。
  • error:表示异步操作发生的错误。

下面是一个示例代码,演示了如何使用FutureBuilder来处理异步操作:

代码语言:txt
复制
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return 'Hello, World!';
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchData(),
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator(); // 显示加载指示器
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}'); // 显示错误信息
        } else {
          return Text('Data: ${snapshot.data}'); // 显示返回的数据
        }
      },
    );
  }
}

在这个示例中,fetchData函数模拟了一个异步操作,延迟2秒后返回一个字符串。FutureBuilder根据异步操作的状态来构建不同的UI:当异步操作正在加载数据时,显示一个加载指示器;当异步操作成功返回数据时,显示返回的数据;当异步操作发生错误时,显示错误信息。

推荐的腾讯云相关产品:腾讯云函数(云原生Serverless计算服务),腾讯云数据库(云原生数据库服务),腾讯云CDN(内容分发网络服务)。

腾讯云函数产品介绍链接地址:https://cloud.tencent.com/product/scf 腾讯云数据库产品介绍链接地址:https://cloud.tencent.com/product/cdb 腾讯云CDN产品介绍链接地址:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter FutureBuilder 异步UI神器

那么当 Flutter 涉及到 Future 的时候,widget 该如何去构建呢? 在网络请求 开始前、请求中、请求完成或失败,我们应该如何去管理我们的UI?...为此,Flutter 推出 FutureBuilder。...FlutureBuilder 有两个参数: future:这个参数需要一个 Future 对象,类似于 网络请求、IO builder:这个参数需返回一个 widget,我们可以看到 demo 中根据现在快照不同的连接状态返回不同的...我们在打开一个页面的时候肯定会有网络请求,这个时候要显示 loading 之类的,我们就可以利用当前快照的状态来返回不同的 widget,比如这样: ?...; }, future: _future, ), ); } Scaffold 的 body 直接返回一个 FutureBuilder,根据不同状态来返回了不同的 widget

4.7K30

Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )

文章目录 一、FutureBuilder 简介 二、处理 Flutter 中的中文乱码 三、完整代码示例 四、相关资源 一、FutureBuilder 简介 ---- FutureBuilder 本质是组件...: FutureBuilder 构造好以后 , 会自动执行异步操作 , 并返回 Widget 组件 , 因此 FutureBuilder 也是一个组件 , 在不同的状态下显示不同样式的组件 ; FutureBuilder...泛型设置 : FutureBuilder 的泛型 , 表示异步调用得到的 Future 的泛型 , 也就是返回结果的格式 ; FutureBuilder 表示异步调用 Future...的返回值是 Future ; Future future 参数设置 : 这是设置的是异步操作方法 , 下面的 httpGet() 方法 , 是一个返回 Future<CommonModel...官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn

1.6K20

Flutter异步编程Future与FutureBuilder的实用技巧

,以及FutureBuilder常见的用法?等。 在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助; 目录 什么是Future?...AsyncWidgetBuilder类型的回到函数,是一个基于异步交互构建widget的函数; 这个builder函数接受两个参数BuildContext context 与 AsyncSnapshot snapshot,它返回一个...在构建器函数中,我们检查connectionState的值,并使用AsyncSnapshot中的数据或错误返回不同的窗口小部件。...https://flutter-academy.com/async-in-flutter-futurebuilder/ FutureBuilder的使用?...参考资料 Flutter从入门到进阶实战携程网App 「快速上手Flutter开发系列教程」之线程和异步UI开发指南

2.2K10

Flutter | 定义一个通用的多功能网络请求 Widget

那说起网络请求的控件,我们首先是不是会想起 FutureBuilderFutureBuilder 给我们封装好了网络请求中的各种状态。...如果没有了解过,那么可以看我这篇文章:Flutter - FutureBuilder 异步UI神器。 这篇文章是早期写的,有些地方写的有些问题,但不重要!...如果返回了正常的数据,那我们还是返回回去,如果不是正常的数据,则直接抛出 Future.error(0)。...正常时返回正常数据,错误时返回错误 Widget 这就需要我们封装好的网络请求和 FutureBuilder 有一个互动了, 网络请求的逻辑如下: ?...如果返回错误,则返回错误的 Widget。 错误 Widget 可以点击重新请求 这个逻辑其实很简单,在我最开始说的文章中有讲解一部分。 那就是什么时候 FutureBuilder 会重新创建?

1.6K31

typeof运算对于null返回“Object

您也许会问,为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。...对变量或值调用 typeof 运算符将返回下列值之一: undefined - 如果变量是 Undefined 类型的 boolean - 如果变量是 Boolean 类型的 number - 如果变量是...Number 类型的 string - 如果变量是 String 类型的 object - 如果变量是一种引用类型或 Null 类型的 这里需要注意的是:alert(typeof null); //...null被认为是对象的占位符,但仍然算做原始数据类型 另一种只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。...如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。 2.Null类型 Null类型(空型)只有一个值就是:null

2.1K40

React报错之ref返回undefined或null

原文链接:https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null[1] 作者:Borislav Hadzhiev[2] 正文从这开始...~ 总览 当我们试图在其对应的DOM元素被渲染之前访问其current属性时,React的ref通常会返回undefined或者null。...该钩子返回一个可变的ref对象,ref对象上的current属性被初始化为传递的参数。 我们没有为useRef传递初始值,因此其current属性设置为undefined。...如果我们将null传递给钩子,如果立即访问其current属性,将会得到null。 需要注意的是,我们必须访问ref对象上的current属性,以此来访问设置了ref属性的div元素。...参考资料 [1] https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null: https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null

1.1K10
领券