StreamBuilder 上述的Stream和Sink还只是纯数据层面的，要想和UI相关的Widget关连起来，还有需要StreamBuilder的帮助。...StreamBuilder也是一个Widget，其作用就是监听指定的Stream，一旦这个Stream中有数据来了，就调用builder中的闭包，用新的数据，重新构建这个widget。...snapshot) { // return widget } 有了StreamBuilder，我们就可以开始MVVM的尝试了。...注释(3)处是Stream，这里会对传入的数据做处理，然后返回给实际需要的数据。 注释(4)(5)这两个方法是网络请求，分别实现了刷新和加载下一页的逻辑。...需要注意的是，这里虽然只用了一个StreamBuilder，但是不代表一个页面只能用一个StreamBuilder，每个想要单独监听某个Stream的widget外面都是wrap一个StreamBuilder
有兴趣想要了解更多的可以看看。...} } //model2 import 'package:flutter/material.dart'; class PersionModel with ChangeNotifier { List... persionNames = ['小明', '小红']; PersionModel(); List get getPersionNameList => persionNames...构建小部件 二者区别在于StreamBuilder可以操作stream流，做一些简单的操作。...当listenable 发生改变时，widget 会rebuild 重新构建widget
所以当我们通过 context 调用 inheritFromWidgetOfExactType 时，就可以往上查找到父控件的 Widget，从在 scoped_model 获取到 _InheritedModel...之后我们可以 dispatch 一个 Action ，在经过 middleware 之后，触发对应的 Reducer 返回数据，而事实上这里核心的内容实现，还是 Stream 和 StreamBuilder...定义 effect 、 middleware 、reducer 用于实现副作用、中间件、结果返回处理。 定义 view 用于绘制页面。...4、Store 对象对外提供的 subscribe 方法，在订阅时会将订阅的方法添加到内部 List _listeners 。...我们还会再见吗？
如果StreamBuilder有了解可以直接看第二部分 一、局部刷新的关键点 StreamBuilder setState() 现在页面上有两个数字key1和key2需要展示,当点击上方的按钮时，我们对应修改...StreamBuilder可以完美解决局部刷新的问题，但StreamBuilder也有着同样明显的缺点，使用起来非常麻烦，需要自己手动创建流，将控件用StreamBuilder包裹构造。...类似Provide的解决方案也需要设定顶级Widget，然后用consumer包裹子控件，调用更新等等操作。 有没有什么方式可以简化我们的使用呢？...核心在于我们的addObserver中，该方法需要传入一个 返回值为Widget Function(BuildContext context, T data) observer的方法,这个传入的方法正是我们需要构建的...而且由于MultDataLine是mixin定义，所以我们可以在任意的类中混入使用方法。例如直接在Widget中混入改类，调用getLine方法获取到StreamBuilder。
Future.whenComplete() 类似于 try catch 后面的 finnaly，无论成功和失败，最终都会执行到这里 Future.them 链式调用 //在 them 中可以接继续返回值...在 future 出错的时候，该值会被 AsyncSnapshot 从 data 中删掉 builder：返回一个 Widget AsyncSnapshot 用来保存 future 最近的状态，...(_summary); }); }); _summary = widget.afterConnected(_summary); } } 复制代码 StreamBuilder...做的小游戏 在日常开发中，StreamBuilder 还是挺实用的，这次我们用 StreamBuilder 来做一个小游戏，先看效果： 从上面的动画来看，可以将其分为三个部分，第一个部分则是底部的键盘...physics: NeverScrollableScrollPhysics(), padding: EdgeInsets.all(0.0), children: List.generate
通过Dart提供的Stream机制，Flutter可以很轻松的构建响应式的编程方式，同时也让跨页面、跨Widget的数据管理问题迎刃而解。 Flutter的响应式编程，具有下面几个特点。...私有的model和StreamController 公开的get方法返回Stream 公开的业务处理函数 dispose函数 创建BLoC管理类 BLoC管理类是一个通用的处理类，借助StatefulWidget...在UI层中，需要做的就是通过StreamBuilder来解析要监听的数据，StreamBuilder的builder函数是一个AsyncWidgetBuilder，它能够异步构建widget，其参数AsyncSnapshot...BLoC流的单播与广播 Flutter中的Stream分为两种，单播与多播，默认情况下创建的是单播Stream，这样的话，只能有一个StreamBuilder来监听，如果存在多个StreamBuilder...举个例子，比如在第一个界面在流中添加了一些数据，再打开第二个界面的时候，创建StreamBuilder之后，是无法直接获取流的最新数据的，因为这时候流中的的数据在StreamBuilder监听之前就已经结束了
如何基于由Stream提供的数据构建Widget？ Flutter提供了一个非常方便的StatefulWidget，称为StreamBuilder。...下面的代码演示了如何使用StreamBuilder： StreamBuilder( key: ...optional, the unique ID of this Widget......>(context); 可以使用多个BLoC吗？...这三点解释了我为什么选择通过StatefulWidget实现BlocProvider，这样做可以让我在Widget dispose时释放相关资源。...MovieCatalogBloc.outMoviesList返回一个List ，它被迭代以构建每个Movie Card。
如果你需要对输出数据进行处理，可以使用StreamTransformer，它可以对输出数据进行过滤、重组、修改、将数据注入其他流等等任何类型的数据操作。...AsyncSnapshot snapshot){ if (snapshot.hasData){ return ...基于snapshot.hasData返回的控件...} return ...没有数据的时候返回的控件 }, ) 下面是一个模仿官方自带demo“计数器”的一个例子，使用了StreamBuilder，而不需要任何setState...的监听，StreamBuilder重建并刷新counter //步骤4.往StreamBuilder里添加流，数据变了，就用通知小部件 _streamController.sink.add...; this.focusType = this.widget.focusType; this.index = this.widget.index; this.studentId
在 Dart 中，您可以创建一个返回 Stream 的容量，该容量可以在异步进程处于活动状态时发射一些值。...介绍: StreamBuilder 可以监听公开的流，并返回小部件和捕获获得的流信息的快照。造溪者提出了两个论点。...例如，如果一个 Stream 已经返回了任何值，但此时还没有结束 done: > 完成: 与结束的异步计算相关联。...splash_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget...State { @override initState() { super.initState(); } @override Widget
单Stream Flutter中的StreamBuilder组件封装了Stream，可以根据不同的状态创建不同的Widget。...appBar: AppBar( title: Text('单Stream'), ), body: Center( child: StreamBuilder...这种单Stream可以在一个页面中控制状态，因为只能有一个订阅者，因此只能做局部状态的控制。...广播Stream 广播Stream，可以有多个订阅者，当发布一个事件后，存在的多个订阅者就都可以收到消息。...参考 Using StreamBuilder in Flutter Flutter中的状态管理
许多小部件，特别是“Material”小部件，都伴随着其设计规范中所描述的标准运动效果，但是与此同时，也可以自定义这些效果。 在这个博客，我们将探讨 SlimyCard动画。...可以将任何自定义窗口小部件放置在这两个单独的卡中。 属性 slimy_card 包的一些属性： **颜色：**这些属性表示用户添加他们想要的任何颜色。...在StreamBuilder中，添加一个initialData；SlimyCard支持Streams（BLoC）提供其实时状态。为此，将SlimyCard 包在StreamBuilder中。...TextAlign.center, ), ), SizedBox(height: 10), ], ); } 在bottomCardWidget中，我们将返回...您可以根据自己的选择修改此代码。这是 我对SlimyCard Animated进行的简短介绍。
在Flutter中，如果我们想要更新页面中的某个widget的状态的话，一般会使用setState方法重走build方法来刷新。当页面布局复杂的时候，这样肯定是不行的。...(); } } 页面布局如下： void main() = runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget...) : TextStyle(color: Colors.grey, fontSize: 14), ), ); }), ), ), ) ); } } 可以看到...MyApp是继承自 StatelessWidget的，是一个没有状态的widget。...final StreamController _streamController = StreamController<int (); int count = 10; @override Widget
Widget only [1240] 请注意：除了Widget项外，BLoC和Service项 都是可选的。 换句话说：您可以根据具体情况适当地 使用 或 省略 它们。...UI层的控件可以自由调用由BLoC或Service定义的 同步 或 异步 方法，并可以通过StreamBuilder对流进行订阅。...2.返回一个Future的结果，调用的代码可以等待结果并相应地执行某些操作。 3.抛出一个异常，调用的代码可以通过try/catch捕获它，并在需要时展示一个警告。...我们能通过WABS创建异步服务吗？ 当然，正如我之前所说的： BLoC可以持有和修改状态。 Service不能持有和修改状态。 但是，他们向外暴露的API遵循相同的规则。...我应该在我的应用中使用BLoC吗？ BLoC具有陡峭的学习曲线。要了解它们，您还需要熟悉Stream和StreamBuilder。
它标注在函数{ 之前，其方法必须返回一个 Iterable对象 ? 的码为\u{1f47f}。...它标注在函数{ 之前，其方法必须返回一个 Stream对象 下面fetchEmojis被async*标注，所以返回的必然是Stream对象 注意被async*标注的函数，可以在其内部使用yield...-- 2020-05-20T07:35:27.511723 ---- 四、Stream的使用-StreamBuilder Stream在组件层面最常用的就数StreamBuilder,本文只是简单用一下...material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget...: _buildChildByStream, stream: _stream, ), ); } Widget _buildChildByStream(
在这个例子中，我们将使用StreamBuilder部件来侦听新消息和一个Text 部件来显示它们。...new StreamBuilder( stream: widget.channel.stream, builder: (context, snapshot) { return new Text...与将返回单个异步响应的Future不同，Stream类可以随着时间的推移传递许多事件。...StreamBuilder部件将连接到Stream，并在每次接收到事件时使用给定的builder函数请求Flutter重建！...为此，我们可以关闭sink。
Bloc Widgets BlocBuilder BlocBuilder 是一个Flutter widget，它需要一个bloc和一个builder函数，BlocBuilder用响应 的新状态构建一个widget...，BlocBuilder和StreamBuilder十分相似，但是它有一个更简单的API来减少所需的样板代码数量,builder函数可能会被多次调用，并且应该是一个纯函数，它返回一个小部件来响应状态。...(context, state) { // return widget here based on BlocA's state } ) 对于何时调用builder函数的细粒度控制，可以提供一个可选参数...buildWhen获取bloc前一个状态和当前状态，并返回一个布尔值。如果buildWhen返回true，那么将使用state调用builder，widget将重新构建。...如果buildWhen返回false，则不会调用带有状态的builder，也不会发生任何重建。
目录 工具类 工具类 // 获取一年的工作日 public static List getYearDays(String year){ List CalList
在Dart中，有await标记的运算，其返回结构都是一个Future对象，所以我们可以这样写： String data; getData() async { data = await http.get...Future Future对象表示异步操作的结果，进程或者IO会延迟完成；我们可以通过它在某个时间点获得异步任务中返回的值，每一个Future都是一个Event，例如我们常用的RefreshIndicator...3.1 Future常用函数 then() 函数 任务执行完成后会进入then函数，能够获取返回的结果 **catchError()**函数 任务失败时，可以在此捕获异常 **whenComplete(...使用 StreamBuilder是Flutter中的一个Widget，记录着流中最新的数据，当数据流发生变化时，会自动调用Builder进行重建 const StreamBuilder({ Key...= null), super(key: key, stream: stream); 可以看到StreamBuilder需要接受一个Stream 使用StreamController 结合
中可用于异步通信的方案有如下： Provider （ Provider 异步通信、Provider状态管理） ValueNotifier 点击查看详情 Stream: StreamController的使用详情 | StreamBuilder...组件的结合使用 | StreamBuilder 实现的倒计时进度圆圈 EventBus (不考虑使用) Bloc BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探...BLoC模式可以将Widget构建UI的代码与业务处理的代码分离出来，在BLoC模式下的应用程序，一般会有全局的BLoC，每一个页面也会对应有一个独立的BLoC。...).format(dateTime); ///发射更新数据 yield formatTime; } } [在这里插入图片描述] 3 BlocBuilder BlocBuilder与StreamBuilder...buildWhen参数，用于向BlocBuilder提供可选的条件，返回 true，那么将调用state执行视图的重新构建，如果返回false，则不会执行视图的重建操作。
TabInfo(Home(), "首页", Icons.home), TabInfo(Text(""), "我的", Icons.person) ]; @override Widget...index; }); }, ), body: pageList[_currentIndex].widget...build(BuildContext context) => DefaultTabController( child: StreamBuilder(...取而代之的是我们定义了changeTabStream，这是一个PublishSubject用来发送事件，Flutter官方提供了StreamBuilder来响应这种事件流，很贴心。...这个例子还看不出Rx的明显优势，但是大家可以思考一下，Rx的好处在哪里。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
