第一百三十三回 StreamProvier

文章目录

我们在上一章回中介绍了通道相关的内容,本章回中将介绍 StreamProvider组件 .闲话休提,让我们一起Talk Flutter吧。

概念介绍

在Flutter中Stream是经常使用的组件,对该组件的监听可以StremBuilder,对该组件中数据的共享就是需要使用StremProvider。StreamProvider是一个类,它不是Flutter SDK中自带的类,而是由Provider包提供的类。本章回将介绍如何通过StreamProvider来共享Stream中的数据;

使用方法

  1. 创建或者获取Stream对象;
  2. 在根目录下的provider属性中添加StreamProvider;
  3. 在项目中通过Consumer获取StreamProvider中的数据

使用上面的方法时需要提前导入Provider包,仔细看一下这个使用方法,是不是有种似曾相识的感觉?这种感觉是对的,因为使用StreamProvider共享数据的方法和使用Provider共享数据的方法相同,只是我们以前介绍的是ChangeNotifierProvider来共享数据。这两个类都是Provider包中的类,只是它们使用的场景不同而已。我们重点介绍一下创建StreamProvider时使用的构造方法,该方法中有两个必选参数,详细如下:

  • Create<Stream?> create: 该参数主要用来创建Stream对象;
  • T initialData: 该参数用设置Stream对象的初始值;

在实际项目中,我们可以自己创建Stream对象,也可以直接使用其它程序创建Stream对象,比如文件读写,网络操作都会产生Stream对象。

示例代码

介绍完使用方法后,我们通过具体的代码来演示如何使用StreamProvider管理数据:

dart 复制代码
  ///使用StreamProvider共享stream中的数据
  StreamProvider(create:(_) => Stream.periodic(const Duration(seconds: 2),(event)=>(event+1)).take(5),
      initialData: 9),

            ///监听StreamProvider中的数据,这个数据源在main文件中
          Consumer<int>(
              builder: (context,data,_){
                return Text("value: $data");
          }),
  ///监听StreamProvider中的数据
  Consumer<int>(
      builder: (context,data,_){
        return Text("value: $data");
  }),

上面代码中通过Stream的periodic()方法创建了Stream,并将泛型指定为int,默认值为9.注意:创建的StreamProvider需要放在MultiProvider中,示例代码中没有列出来。

编译并且运行上面的程序,就可以在终端打印出Stream中的共享的数据。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。

看官们,与"StremProvider"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

相关推荐
FungLeo2 天前
成为全栈·Flutter App 篇·主题与可访问性:深浅色、大字号和触控体验
flutter·移动开发·深色模式·可访问性·成为全栈·大字号适配
传奇开心果编程3 天前
【Compose Multiplatform跨端声明式UI实用技术】第10课:CMP 导航——Navigation 3 实战
移动开发·编程语言理论·开发范式·编程框架·声明式ui·cmp导航·navigation 3
FungLeo3 天前
成为全栈·Flutter App 篇·第四批复盘:复用了什么,移动端又新增了什么
flutter·移动开发·跨端开发·成为全栈·api契约·全栈复盘
传奇开心果编程4 天前
【Compose Multiplatform跨端声明式UI实用技术】第7课:列表与惰性布局
移动开发·列表·编程语言理论·开发范式·编程框架·声明式ui·惰性布局
传奇开心果编程5 天前
【Compose Multiplatform跨端声明式UI实用技术】第6课:常用组件与 Material 3 设计系统
移动开发·编程语言理论·开发范式·编程框架·声明式ui·常用组件·material 3 设计系统
FungLeo5 天前
成为全栈·Flutter App 篇·Markdown 编辑器:编辑、预览与离开保护
flutter·移动开发·markdown编辑器·表单设计·成为全栈·草稿保存
传奇开心果编程5 天前
【Compose Multiplatform跨端声明式UI实用技术】第3课:Compose Hot Reload 与开发效率工具链
移动开发·编程语言理论·热重载·开发范式·编程框架·声明式ui·效率工具链
FungLeo6 天前
成为全栈·Flutter App 篇·内置 WebView:网页历史、App 返回与外链安全
flutter·网络安全·移动开发·webview·路由管理·成为全栈
传奇开心果编程6 天前
【Compose Multiplatform跨端声明式UI实用技术】第4课:Composable 函数与声明式 UI 思维
移动开发·编程语言理论·开发范式·编程框架·函数式思维·声明式ui·声明式ui思维
传奇开心果编程6 天前
【Compose Multiplatform跨端声明式UI实用技术】第1课:CMP 全景解读——为什么选择声明式跨平台UI
移动开发·编程语言理论·开发范式·编程框架·声明式ui·跨平台声明式ui·逻辑共享与ui共享