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

如何从FutureBuilder或异步代码构建PreferredSizeWidget,而不是Widget?

从FutureBuilder或异步代码构建PreferredSizeWidget,而不是Widget,可以通过以下步骤实现:

  1. 首先,了解FutureBuilder和PreferredSizeWidget的概念和作用:
    • FutureBuilder是Flutter中的一个小部件,用于在异步操作完成后构建小部件树。
    • PreferredSizeWidget是一个抽象类,用于定义具有首选大小的小部件。
  • 创建一个异步操作,例如从网络获取数据或执行耗时的计算。
  • 使用FutureBuilder包裹PreferredSizeWidget,将异步操作与PreferredSizeWidget进行关联。示例代码如下:
代码语言:txt
复制
FutureBuilder(
  future: fetchData(), // 异步操作,返回一个Future对象
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      // 异步操作正在进行中,返回加载中的小部件
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      // 异步操作发生错误,返回错误信息的小部件
      return Text('Error: ${snapshot.error}');
    } else {
      // 异步操作已完成,返回PreferredSizeWidget
      return PreferredSize(
        preferredSize: Size.fromHeight(200), // 设置首选大小
        child: YourWidget(), // 替换为自己的小部件
      );
    }
  },
)

在上述代码中,fetchData()是一个异步操作的示例函数,可以根据实际需求进行替换。根据异步操作的状态,返回不同的小部件。

  1. 根据需要设置PreferredSizeWidget的首选大小,可以使用PreferredSize小部件的preferredSize属性进行设置。

以上是使用FutureBuilder或异步代码构建PreferredSizeWidget的基本步骤。根据具体的业务需求和场景,可以进一步优化和定制化PreferredSizeWidget的功能和外观。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库MySQL版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发:https://cloud.tencent.com/product/mobdev
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云游戏多媒体引擎(GME):https://cloud.tencent.com/product/gme
  • 腾讯云视频处理服务(VOD):https://cloud.tencent.com/product/vod
  • 腾讯云音视频通信(TRTC):https://cloud.tencent.com/product/trtc
  • 腾讯云云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云网络安全(SSL证书):https://cloud.tencent.com/product/ssl
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

Future表示在接下来的某个时间的值错误,借助Future我们可以在Flutter实现异步操作。...; }); } future.timeout 完成一个异步操作可能需要很长的时间,比如:网络请求,但有时我们需要为异步操作设置一个超时时间,那么,如何为Future设置超时时间呢?...类型的回到函数,是一个基于异步交互构建widget的函数; 这个builder函数接受两个参数BuildContext context 与 AsyncSnapshot snapshot,它返回一个...在构建器函数中,我们检查connectionState的值,并使用AsyncSnapshot中的数据错误返回不同的窗口小部件。...参考资料 Flutter入门到进阶实战携程网App 「快速上手Flutter开发系列教程」之线程和异步UI开发指南

2.2K10

Flutter Widgets 之 FutureBuilder

展示异步任务状态 当有一个Future(异步)任务需要展示给用户时,可以使用FutureBuilder控件来完成,比如向服务器发送数据成功时显示成功提示: var _future = Future.delayed...builder是FutureBuilder构建函数,在这里可以判断状态及数据显示不同的UI, ConnectionState的状态包含四种:none、waiting、active、done,但我们只需要关注...通过上面的示例说明FutureBuilder控件极大的简化了异步任务相关显示的控件,不再需要开发者自己维护各种状态以及更新时调用`State.setState`。...也会重绘,这不仅耗费不必要的资源,如果是网络请求还会消耗用户的流量,这是非常糟糕的体验,如何解决这个问题?...通过源代码发现FutureBuilder重绘逻辑是这样的: @override void didUpdateWidget(FutureBuilder oldWidget) { super.didUpdateWidget

1.2K40

Flutter FutureBuilder 异步UI神器

一般程序员都会了解,类似于 IO、网络请求等都应该是异步的。 在Dart中,我们使用 Future 来管理,这样就不用担心线程或者死锁的问题。...那么当 Flutter 涉及到 Future 的时候,widget如何构建呢? 在网络请求 开始前、请求中、请求完成失败,我们应该如何去管理我们的UI?...翻译过来说就是 FutureBuilder 是基于 Future 快照来构建自身的一个组件。 快照是啥玩意?个人理解就是这个 Future 目前的信息。...如何使用 先看看 FutureBuilder 是个啥, 点开源码: class FutureBuilder extends StatefulWidget { const FutureBuilder...首先看build代码: @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(

4.8K30

Flutter | 事件循环,Future

在程序执行过程中,如果有异步操作,这个操作就会添加到队列中,当发现队列不为空时,就会然后不断的队列中取出事件在执行 Microtask Queue 一个顶级的队列,只要这个队列里面不是空的,就一定会执行该队列中的任务...Event Queue 普通的事件队列,比 Microtask Queue 低了一个等级,在 Microtask Queue 中没有任务的时候才会执行该队列中的任务 需要异步操作的代码都会放在 EventQueue....then((value) => print('已完成状态')) .catchError((value) => print('异常状态')); 复制代码 我们程序中的大部分异步操作都是围绕着这三种状态进行的...在 future 出错的时候,该值会被 AsyncSnapshot data 中删掉 builder:返回一个 Widget AsyncSnapshot 用来保存 future 最近的状态,...源码其实很简单,仔细看一下就知道整个流程了 StreamBuilder 介绍 上面的 FutureBuilder 只能给我们一个值, StreamBuildder 可以给我们一连串的值 ,例如: final

4.2K10

FutureBuilder与Stream

FutureBuilder FutureBuilder 是一个基于 Future 最后一次结果进行构建Widget。...一定不要在 State.build StatelessWidget.build 方法中构建 FutureBuilder 的同时去获取 Future。...如果创建 FutureBuilder 的同时也去创建 Future,FutureBuilder 的父节点每次构建时会导致异步任务也重启。...Stream 指的是数据 A 流动到的 B 的通道。在这个通道中可以在到达 B 之前对”读入”的数据进行不同的变换。以小块来传输不是整体传输数据时这个通道非常有用。...由于是以异步的方式操作,所以得到的好处是以非阻塞式的方式来运行代码。建议阅读文章,尤其是 dart:async 库,它包含有用于异步编程的 Streams 和 Futures。

99620

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

那说起网络请求的控件,我们首先是不是会想起 FutureBuilderFutureBuilder 给我们封装好了网络请求中的各种状态。...如果没有了解过,那么可以看我这篇文章:Flutter - FutureBuilder 异步UI神器。 这篇文章是早期写的,有些地方写的有些问题,但不重要!...如果返回了正常的数据,那我们还是返回回去,如果不是正常的数据,则直接抛出 Future.error(0)。...确认网络请求控件所需要的功能 我们最开始的图中明显能看出来的,其实是有三个功能: 1.请求数据并显示 Loading2.正常时返回正常数据,错误时返回错误 Widget3.错误 Widget 可以点击重新请求...请求数据并显示 Loading 但是,这里也有一个问题: 我们在最开始定义网络请求工具类的时候,每一个网络请求都是一个方法,每个方法中都有或者没有参数。

1.7K31

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

文章目录 一、FutureBuilder 简介 二、处理 Flutter 中的中文乱码 三、完整代码示例 四、相关资源 一、FutureBuilder 简介 ---- FutureBuilder 本质是组件...: FutureBuilder 构造好以后 , 会自动执行异步操作 , 并返回 Widget 组件 , 因此 FutureBuilder 也是一个组件 , 在不同的状态下显示不同样式的组件 ; FutureBuilder...泛型设置 : FutureBuilder 的泛型 , 表示异步调用得到的 Future 的泛型 , 也就是返回结果的格式 ; FutureBuilder 表示异步调用 Future..., 可以在请求中显示进度条 , 请求后判定是否请求成功 , 如果出错 , 则显示报错信息 , 如果请求成功 , 则显示请求成功的信息 ; 无论怎样 , 最终要返回一个 Widget 组件 ; FutureBuilder...构造函数完整代码示例 : @override Widget build(BuildContext context) { return MaterialApp( home:

1.7K20

2022-01-11: flutter weekly第2期

每周分享全球精彩文章、教程、插件和视频,如果您觉得有用,请不要吝啬您的掌声、评论、赞赏任何其他您想给予的认可。 如果你有任何关于 Flutter Dart 的消息想要我分享,请联系我。...Abhay Sood 介绍了他们如何将 Flutter 引入他们的技术栈,以及他们如何设法降低内部使用 Flutter 的门槛。...utm_source=fluttertap 教程 Flutter FutureBuilder Example: Async Done Right. 介绍了 FutureBuilder异步编程。...介绍了flutter中如何使用flame制作游戏....Flutter 开发人员非常熟悉不断增长、不断增长……不断增长的wiidget构建方法。在这段视频中,Craig Labenz 比较了两种不同的方法来构建widget,以及最佳选择。

40220

Flutter 构建完整应用手册-联网 顶

Future是与异步操作一起工作的核心Dart类。 它用于表示未来某个时间可能会出现的潜在价值错误。 http.Response类包含成功的http调用收到的数据。...现在我们有一个功能,我们可以调用互联网上获取Post! 3.用Flutter获取并显示数据 为了获取数据并将其显示在屏幕上,我们可以使用FutureBuilder小部件!...Flutter附带FutureBuilder部件,可以轻松处理异步数据源。 我们必须提供两个参数: 使用的Future。 在我们的例子中,我们将调用我们的fetchPost()函数。...WebSocketChannel服务器提供消息Stream 。 Stream类是dart:async包的基础部分。 它提供了一种方法来侦听来自数据源的异步事件。...StreamSink类提供了将同步异步事件添加到数据源的一般方法。 4.关闭WebSocket连接 在我们完成使用WebSocket之后,我们将要关闭连接! 为此,我们可以关闭sink。

2.5K20

Flutter 刷新页面:通过下拉刷新提升用户体验

构建用于刷新功能的 Widget Tree 在一个 Flutter 应用中创建一个直观且响应式 pull-to-refresh 特性,需要细心构建 widget tree。...构建用于下拉刷新的小部件 为了实现下拉刷新,我们可滚动挂件开始,比如 ListView 或者 ScrollView,这些将会是 RefreshIndicator 挂件的 child 内容。...,fetchData 是一个假设异步函数,用来获取新数据。...为了充分利用热加载,请使用模块化构建代码,在不同函数或者类中分离获取刷新数据逻辑和更新 UI。这会让我们独立更改和测试小块代码,降低引入错误的风险并加快开发过程。...,_handleRefresh 函数可以使用热加载来更改和测试,不影响到其他的 widget tree。

14610

我的 Flutter TDD 心路历程

widget 不是回调传入的 builder 参数,因此,builder 只回调了三次,这也就导致之前的用例失败了。...的方法,由列表内部获取并触发 Future,这样我们就可以外部判断 Future 何时结束了 这个思考过程,其实是可测性的构造过程,TDD 有助于我们写出更加可测的代码,更可测的代码往往意味着设计更加合理...1:如果是加载第一页,直接触发 onLoadMore, 并将返回的 Future 传给 FutureBuilder; 如果不是第一页,将 null 返回给 FutureBuilder,此时代码就会走入到...省略无关代码 } else { // 注释2:当不是加载第一页,由于将 null 传给了 FutureBuilder,因此代码会走到这里来...、拆解任务,设计用例的过程就是拆解任务的过程,同时要思考代码如何设计才更加可测,往往具有可测性的代码,其结构、职责更加清晰 觉得写的用例有点傻,感觉没什么用 需要思考是不是需要写这个用例,不是所有代码都需要写单测

1.2K20

Flutter实战 | 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)

本系列可能会伴随大家很长时间,这里我会0开始搭建一个「网易云音乐」的APP出来。 下面是该APP 功能的思维导图: ?...前期回顾: •Flutter实战 | 0 搭建「网易云音乐」APP(一、创建项目、添加插件、通用代码)•Flutter实战 | 0 搭建「网易云音乐」APP(二、Splash Page、登录页、...我们回过头看一下两个页面的UI,是不是感觉非常相似!我们来捋一下。 ?...1.标题,不用多说,是一样的2.SliverAppBar 展开状态时的内容,是不是可以由外部传入3.播放全部,也是一样的,后面有个「共多少首」,也可以由调用者传入4.最下面的歌单,是不是也可以封装出一个组件来...,所以我们的代码是这样: class MusicListHeader extends StatelessWidget implements PreferredSizeWidget { MusicListHeader

1.4K20

为什么说Flutter让移动开发变得更好?

让我们在Android中构建此列表所需的步骤开始: 用XML创建list-item布局文件 创建一个适配器来绑定视图并设置数据 为列表创建布局(可能在ActivityFragment中) 填充Fragment...最重要的是,我们使用了FutureBuilder(Flutter SDK的一部分),它需要我们指定一个Future(回调)和一个构建器函数。...不用再为一点点修改重新构建应用,浪费时间。 不再有XML布局, 也不再有findViewById。 不再有多余的样板代码 。 既然两个app的功能几乎一样,我就比较好奇两种不同语言实现的代码量。...那么应该如何进行对比?(免责声明:Flutter版本中还没有实现持久化,原生代码写的也很乱)。...现在无需处理Android中的数据绑定,比如设置监听器处理生成的绑定代码。 在Android上构建这些基本的东西非常繁琐。

2K10

Flutter 绘制探索 4 | 深入分析 setState 重建和更新 | 七日打卡

在第一篇也说过,对于有 滑动 动画 需求的绘制,重建触发的频率非常大,此时即使对象是 轻量的,也会在短时间内创建大量对象,这样不是很好。...从这也可以看出,如果新旧 Widget 对象不变的话,会有优化,直接使用旧的孩子。 ? ---- 由于新旧 Widget 不是同一对象,就会走下面分支,判断 Widget 是否可以更新。...通过上面的代码可以发现 State#setState 的作用是将持有的 Element 加入待构建的脏表,并触发帧的调度来重新构建和绘制。...---- FutureBuilder 组件根据异步任务的状态,使用 setState 进行重新构建的。 ?...对应 setState 我们要注意的是它刷新元素的层级,不是否定它。 ---- 3.Custompainter # shouldRepaint 把守了什么?

1.8K20
领券