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

Flutter中的StreamBuilder与ConnectionState.waiting保持一致,只显示加载标记

在Flutter中,StreamBuilder是一个非常有用的小部件,用于根据异步数据流的状态来构建用户界面。它可以与ConnectionState.waiting一起使用,以便在数据加载过程中显示加载标记。

StreamBuilder是一个通用的小部件,用于根据异步数据流的状态来构建用户界面。它接收一个Stream作为输入,并根据数据流的状态自动更新界面。当数据流处于等待状态时,可以使用ConnectionState.waiting来显示加载标记。

以下是使用StreamBuilder和ConnectionState.waiting来实现加载标记的示例代码:

代码语言:txt
复制
StreamBuilder(
  stream: myStream, // 替换为你的数据流
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 加载标记,可以替换为你自定义的加载组件
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      // 数据加载完成,显示实际内容
      return Text('Data: ${snapshot.data}');
    }
  },
)

在上面的示例中,myStream是一个代表异步数据流的Stream对象。在StreamBuilder的builder函数中,我们根据snapshot的connectionState属性来判断数据流的状态。如果状态为ConnectionState.waiting,我们返回一个CircularProgressIndicator小部件来显示加载标记。如果状态为ConnectionState.done并且没有错误,我们可以访问实际的数据并显示在界面上。

对于腾讯云相关产品,可以使用腾讯云提供的云开发服务来实现类似的功能。腾讯云云开发是一种无服务器的云原生开发平台,提供了丰富的后端服务和工具,可以帮助开发者快速构建和部署应用程序。你可以使用腾讯云云开发的数据库、存储、云函数等功能来处理异步数据流,并根据状态来更新界面。

更多关于腾讯云云开发的信息,请访问腾讯云云开发官方网站:腾讯云云开发

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

相关·内容

在 Flutter 中探索 StreamBuilderimage

假设您需要根据一个 Stream 的快照在 Flutter 中构造一个小部件,那么有一个名为 StreamBuilder 的小部件。...在这个博客中,我们将探索 Flutter 中的 StreamBuilder。我们还将实现一个演示程序,并向您展示如何在您的 Flutter 应用程序中使用 StreamBuilder。...建造函数称为 Flutter 管道的检测。因此,它将获得一个与时间相关的快照子组。这意味着,如果在实际上相似的时间里,Stream 发出了一些值,那么一部分值可能没有传递给构建器。...在这个上下文中,它暗示流还没有完成 active: 活跃的: 与活动的异步计算相关联。例如,如果一个 Stream 已经返回了任何值,但此时还没有结束 done: > 完成: 与结束的异步计算相关联。...这是我对 StreamBuilder On User Interaction 的一个小小介绍,它正在使用 Flutter 工作。

2.5K00
  • Flutter | 事件循环,Future

    在程序执行过程中,如果有异步操作,这个操作就会添加到队列中,当发现队列不为空时,就会然后不断的从队列中取出事件在执行 Microtask Queue 一个顶级的队列,只要这个队列里面不是空的,就一定会执行该队列中的任务..., scheduleMicrotask(() { print("Hello Flutter"); }); 复制代码 Future.microtask() //内部调用的也是上面的函数 复制代码 但是需要注意的是...('world')); xxx.then() 复制代码 Future Flutter 相当于是一个盒子,内部的代码最终会交给 EventQueue 来执行,Future 的状态大致可分为三种,如下: Future...FutureBuilder 的作用就是根据 future 的状态来判断当前页面需要显示哪些 widiget,例如 future 在等待的时候显示加载框,完成之后显示内容等。...做的小游戏 在日常开发中,StreamBuilder 还是挺实用的,这次我们用 StreamBuilder 来做一个小游戏,先看效果: 从上面的动画来看,可以将其分为三个部分,第一个部分则是底部的键盘

    4.3K10

    FutureBuilder源码分析

    关于 FutureBuilder 的使用,我在之前的公众号文章中有写过, 如果没看过的可以跳转:Flutter FutureBuilder 异步UI神器....= null), super(key: key); 构造函数很简单,上一篇文章也说过,主要就是三个参数: •future:是我们的异步请求,该异步请求必须不能在 build 方法中初始化!...Object _activeCallbackIdentity; AsyncSnapshot _snapshot; _activeCallbackIdentity 根据注释来解释大概就是:标记当前还存活的对象...总结 Future 的状态无非三种: 1.未开始2.进行中3.已完成 其中 已完成 又分为两种: 1.有数据2.有异常 其实可以看到,FutureBuilder 大体上的思路就是对 Future 状态的封装...在 Flutter 中,我们可以通过查看源码来获取很多的灵感,因为 Flutter 的 注释写的简直不要太到位!

    85120

    Flutter完整开发实战详解(十二、全面深入理解状态管理设计)

    二、BloC BloC 全称 Business Logic Component ,它属于一种设计模式,在 Flutter 中它主要是通过 Stream 与 SteamBuilder 来实现设计的,所以...利用 StreamBuilder 加载监听 Stream 数据流,通过 snapShot 中的 data 更新控件。...通过 StoreConnector / StoreBuilder 加载显示 Store 中的数据。...在 flutter_redux 中,开发者的每个操作都只是一个 Action ,而这个行为所触发的逻辑完全由 middleware 和 reducer 决定,这样的设计在一定程度上将业务与UI隔离,同时也统一了状态的管理...image Dependent 的组装中 Connector 会从总 State 中读取需要的小 State 用于 Component 的绘制,这样很好的达到了 模块解耦与复用 的效果。

    2.1K20

    【 源码之间 - Flutter 】 FutureBuilder 使用

    加载中 加载完成 加载失败 ---- 一、示例demo详述: 1.关于异步请求 FutureBuilder需要一个异步任务作为构造入参 通过wanandroid的开发api进行文章列表的获取,...标识,然后启动异步任务 接着将_snapshot的状态设为ConnectionState.waiting void _subscribe() { if (widget.future !...,你可以决定返回的界面 比如现在是ConnectionState.waiting,就可以返回loading组件 Widget _builderList( BuildContext context...,也就是源码中的这里 可以看出回调中会将异步返回的数据放在_snapshot这个瓶子里,并setState 这样_snapshot更新后,会重新执行build方法,又会回调外界的_builderList...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,期待与你的交流与切磋。

    1.1K20

    Flutter 实践 MVVM

    Model好说,普通对象嘛,顶多处理一下序列化的问题。 在Flutter中,一切UI皆Widget,那么View层也很明确了,就是Widget部分。...iOS里,也可以通过ReactiveCocoa来实现数据的双向绑定。 而在Flutter中,我们可以借助Stream&Sink来实现数据变更的通知,StreamBuilder来做View层的绑定。...注释(4)(5)这两个方法是网络请求,分别实现了刷新和加载下一页的逻辑。可以看到,这里请求回来后,做的就是把结果add到inStoryListController这个Sink对象中。...,StreamBuilder会监听到这个变化,然后重新通过builder参数中传入的闭包来重新构建这个widget。...注释(4)处,不像下拉刷新有一个特定的widget来做上拉加载更多,官方推荐的做法是,itemCount加1,然后再itemBuilder里面发现到底底部了,开始加载更多的逻辑。

    10.2K70

    Flutter完整开发实战详解(十一、全面深入理解Stream)

    一、Stream 由浅入深 Stream 在 Flutter 是属于非常关键的概念,在 Flutter 中,状态管理除了 InheritedWidget 之外,无论 rxdart,Bloc 模式,flutter_redux...,fish_redux 都离不开 Stream 的封装,而事实上 Stream 并不是 Flutter 中特有的,而是 Dart 中自带的逻辑。...二、StreamBuilder 如下代码所示, 在 Flutter 中通过 StreamBuilder 构建 Widget ,只需提供一个 Stream 实例即可,其中 AsyncSnapshot 对象为数据快照...,通过 data 缓存了当前数据和状态,那 StreamBuilder 是如何与 Stream 关联起来的呢?...我们常用的 setState 中其实是调用了 markNeedsBuild ,markNeedsBuild 内部标记 element 为 diry ,然后在下一帧 WidgetsBinding.drawFrame

    4K41

    抖音的强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫

    版本,ios版本正在解决账号问题 效果如下: 架构更新 之前技术采用flutter做的前端,后端api则对接的是抖音官方api,由于抖音的官方api更新频繁,导致经常播放不了,所以索性自己来写服务器后端..., ); }, ); 然后在需要引用的位置加入: import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 调用的位置...的时候请求的数据正在加载中,则显示加载的图标loading 当snapshot.connectionState == ConnectionState.done 时,此时数据已经加载完毕,但是加载完毕有可能也没有数据...,所以需要判断不同的情况 当加载出现异常情况则显示异常的widget if (snapshot.hasError) { return Column( crossAxisAlignment...另外加载videoplay的时候把width、heigth传入到下一个控件,这样好计算界面呈现的宽度与高度 return Videoplayer( item: item,

    1.1K20

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

    一个builder函数,告诉Flutter渲染什么,取决于Future的状态:加载,成功或错误。...WebSocket允许与服务器进行双向通信而无需轮询。 在这个例子中,我们将连接到由websocket.org提供的测试服务器。 服务器将简单地发回我们发送给它的相同消息!...在Flutter中,我们可以创建一个连接到服务器的WebSocketChannel: final channel = new IOWebSocketChannel.connect('ws://echo.websocket.org...在我们发送消息给测试服务器之后,它会发回相同的消息。 我们如何听取消息并显示它们? 在这个例子中,我们将使用StreamBuilder部件来侦听新消息和一个Text 部件来显示它们。...StreamBuilder部件将连接到Stream,并在每次接收到事件时使用给定的builder函数请求Flutter重建!

    2.6K20

    FlutterDojo设计之道—状态管理之路(三)

    通过Dart提供的Stream机制,Flutter可以很轻松的构建响应式的编程方式,同时也让跨页面、跨Widget的数据管理问题迎刃而解。 Flutter的响应式编程,具有下面几个特点。...在BLoC模式下,Widget与Data彻底解耦: App的业务逻辑处理都在BLoC中 Widget通过Sink向BLoC发送数据 BLoC通过Stream通知Widget重建UI 这其实有点类似MVP...在UI层中,需要做的就是通过StreamBuilder来解析要监听的数据,StreamBuilder的builder函数是一个AsyncWidgetBuilder,它能够异步构建widget,其参数AsyncSnapshot...BLoC流的单播与广播 Flutter中的Stream分为两种,单播与多播,默认情况下创建的是单播Stream,这样的话,只能有一个StreamBuilder来监听,如果存在多个StreamBuilder...举个例子,比如在第一个界面在流中添加了一些数据,再打开第二个界面的时候,创建StreamBuilder之后,是无法直接获取流的最新数据的,因为这时候流中的的数据在StreamBuilder监听之前就已经结束了

    1.6K30

    【 源码之间 - Flutter 】 FutureBuilder源码分析

    active, # Stream中激活但未结束 done, # 结束 } ---- 现在回看_FutureBuilderState#initState中对_snapshot进行初始化时:...标识,然后启动异步任务 接着将_snapshot的状态设为ConnectionState.waiting void _subscribe() { if (widget.future !...,你可以决定返回的界面 比如现在是ConnectionState.waiting,就可以返回loading组件 Widget _builderList( BuildContext context...,也就是源码中的这里 可以看出回调中会将异步返回的数据放在_snapshot这个瓶子里,并setState 这样_snapshot更新后,会重新执行build方法,又会回调外界的_builderList...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,期待与你的交流与切磋。

    1.9K10

    Flutter FutureBuilder 异步UI神器

    一般程序员都会了解,类似于 IO、网络请求等都应该是异步的。 在Dart中,我们使用 Future 来管理,这样就不用担心线程或者死锁的问题。...那么当 Flutter 涉及到 Future 的时候,widget 该如何去构建呢? 在网络请求 开始前、请求中、请求完成或失败,我们应该如何去管理我们的UI?...为此,Flutter 推出 FutureBuilder。...FlutureBuilder 有两个参数: future:这个参数需要一个 Future 对象,类似于 网络请求、IO builder:这个参数需返回一个 widget,我们可以看到 demo 中根据现在快照不同的连接状态返回不同的...这样我们就完成了上图的效果,在网络请求的时候加载小菊花,请求成功加载出 ListView.

    4.8K30

    Dart 异步

    单线程模型按照代码编写的顺序,自上而下运行,这是我们所认知的,但是当遇到耗时操作(IO/网络请求)等,会给UI造成卡顿阻塞,那么在Flutter中是怎么解决这个问题的呢?...在Dart中,有await标记的运算,其返回结构都是一个Future对象,所以我们可以这样写: String data; getData() async { data = await http.get...下拉刷新组件中的onRefresh()方法就是一个event,每一个被await标记的句柄也是一个event,没创建一个Future都会把这个Future放进EQ队列中进行排队。...Stream Stream和 Future一样都是Dart中用来做异步操作的,官方对其定义为: Widgets + Stream = Reactive Flutter APP Stream的作用类似于...使用 StreamBuilder是Flutter中的一个Widget,记录着流中最新的数据,当数据流发生变化时,会自动调用Builder进行重建 const StreamBuilder({ Key

    1.6K20
    领券