文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

FlutterDojo设计之道—状态管理之路（三）

数据的管理，围绕Stream进行，通过Stream的sink和listen，来进行数据的管理 Widget发出Stream后，无需感知外界的影响，同样的，Widget在listen Stream时，只需要根据数据的改变来构建...BLoC模式由Paolo Soares和Cong Hui设计，并谷歌在2018的DartConf首次提出，全称Business Logic Component。 ?...、MVC模式，BLoC模式将整个App分为三层，Data Layer、BLoC Layer、UI Layer，Data Layer和UI Layer都只能和BLoC Layer双向通信，但它们之间彼此隔离...私有的model和StreamController 公开的get方法返回Stream 公开的业务处理函数 dispose函数 创建BLoC管理类 BLoC管理类是一个通用的处理类，借助StatefulWidget...在UI层中，有两种写法，一种是直接使用StatelessWidget，在build函数中初始化BlocProvider.of(context)，另一种是使用StatefulWidget

2.1K30

Flutter 的状态管理方案：setState、BLoC、ValueNotifier、Provider

image.png 例如，我们使用简单的身份验证流程。当登录请求发起时，设置正在加载中的状态。...: (_, bloc) => bloc.dispose(), child: Consumer( builder: (_, bloc, __) => SignInPageBloc...在 _signInAnonymously 方法中，通过调用 bloc.setIsLoading(value) 来更新 stream。...如果在简单值更改时需要重建 widget，请使用 ValueNotifier。 如果你想在 notifyListeners() 调用时有更多掌控，请使用 ChangeNotifier。...在构建自己的应用程序时，你可以根据具体情况来评估哪个方案更合适 小彩蛋：实现 Drawer 菜单 跟踪当前选择的选项也是一个状态管理问题： 我首先在自定义 Drawer 菜单中使用本地状态变量和 setState

6.1K00
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【源码篇】Flutter Bloc背后的思想，一篇纠结的文章

    用过Bloc的靓仔们，肯定能感受到，Bloc框架对开发页面，做了很清晰划分，框架强行定了俩种开发模式 Bloc模式：该模式划分四层结构 bloc：逻辑层 state：数据层 event：所有的交互事件...-20210612164905296] 用法 插件可生成俩种模式代码：Bloc和Cubit；来看下 Cubit模式 view class CounterPage extends StatelessWidget...可以发现Bloc是通过 StreamController 和 listen配合实现刷新的 调用的 widget.listener(context, state)，这个实现的方法是个setState，大家可以看看...cancel(); super.dispose(); } } 来看下效果图：详细的使用代码，请查看：flutter_use [builder] Event机制 如果使用Bloc模式开发，会多出一个...使用 使用基本和Bloc一摸一样 我本来想把emit俩个新旧state对象对比的判断去掉，但是想想Bloc作者对这个理念好像有很深的执念，在很多地方都做了处理；所以，这边我也就保留了，也可以保留Bloc

    2.9K41

    Flutter 对状态管理的认知与思考

    对于标椎模式而言，已经划分的很到位了，但还有某一类层次没有划分出来：用户和程序交互的行为 说明下：想要划分出这一层级，代价必然是很大的，会让框架的使用复杂度进一步上升 后面分析为什么划分这一层次，会导致成本很大...模式和Cubit模式，redux系列。。。...外在表现 Bloc不使用Action View层，代码简写，只是看看其外在表现 class BlBlocCounterPage extends StatelessWidget { @override...层不重要，这地方就不写了 fish_redux对Action层的划分以及事件的分发，明显要比Bloc老道很多 fish_redux使用枚举和一个类就完成了众多事件的定义；bloc需要继承类，一个类一个事件...增加Action层，使用端的成本无法避免 因为使用端增加的成本，就是框架侧的设计核心 [Action层使用成本] 当业务逐渐的复杂起来，Action层的划分是势在必行的，我们必须归纳事件入口；当业务频繁调整时

    1.4K41

    Flutter BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探

    BLoC模式可以将Widget构建UI的代码与业务处理的代码分离出来，在BLoC模式下的应用程序，一般会有全局的BLoC，每一个页面也会对应有一个独立的BLoC。...[在这里插入图片描述] 使用BloC模式，Flutter项目应用里的所有组件都在一个事件流，其中一部分组件可以订阅事件，另一部分组件则消费事件 [在这里插入图片描述] *** 2 BloC 的基本使用...BloC是一种架构模式也是一种编程思想，在Flutter中使用BloC时，首先要引入bloc库 dependencies: flutter_bloc: ^6.0.6 然后将依赖库拉取到本地 flutter...packages get 在Flutter BloC模式开发中常用组件有BlocBuilder、BlocProvider、BlocListener和BlocConsumer等等。...在这里使用Bloc模式开发一个时间计时器 运行效果如下图所示： [在这里插入图片描述] 首先来看程序入口，在这里使用到了 BlocProvider ，BlocProvider相当于一个组合者，它将 Bloc

    4K11

    Flutter GetX使用---简洁的魅力！

    前言 使用Bloc的时候，有一个让我至今为止十分在意的问题，无法真正的跨页面交互！...在反复的查阅官方文档后，使用一个全局Bloc的方式，实现了“伪”跨页面交互，详细可查看：flutter_bloc使用解析；fish_redux的广播机制是可以比较完美的实现跨页面交互的，我也写了一篇几万字介绍如何使用该框架...总结 分析 Obx是配合Rx响应式变量使用、GetBuilder是配合update使用：请注意，这完全是俩套定点刷新控件的方案 区别：前者响应式变量变化，Obx自动刷新；后者需要使用update手动调用刷新...下级页面能随意调用上级页面事件，且关闭页面后，下次重进，数据也很自然重置了（全局Bloc不会重置，需要手动重置） [jump_getx] 实现 页面一 常规代码 logic 这里的自增事件，是供其它页面调用的...Get.toNamed()来导航你的命名路由，不需要任何context(你可以直接从你的BLoC或Controller类中调用你的路由)，当你的应用程序被编译到web时，你的路由将出现在URL中。

    9.1K103

    flutter中使用BloC模式

    更具我自己的一点理解来看，实际上BloC设计模式，似乎和MVP没有什么本质区别，两种设计模式的最终目的就是为了把和UI糅合在一起的业务逻辑代码剥离开来，单独的抽取到一层中。...在flutter中，实现BloC模式的精髓就是， 展示的数据从BloC中来，具体到了stream上，有了stream的到来，就可以使用StreamBuilder来构建ui了。...1、个人觉得，非常简单的页面，使用BloC就有点过了，实际上像上面那个例子，点击次数计数，用StateFulWidget明显就是更优选择，使用BloC就有点为了模式而模式了。...2、用于不用BloC，要基于业务场景来考虑，个人觉得，对于多个UI共享一份数据的例子，就非常使用BloC模式，比如订单相关的页，购物车等等，因为订单状态的扭转，购物车物品同步，用户发送的事件相当多，这种如果使用...我的回答是，必须有一个地方是的，就像弹吉他一样，根弦需要，其他的不需要而且不能需要，因为如果次级页面也通过这种方式获取的话，那他销毁时，dispose被回调，这个bloc也就销毁了，一级页面的bloc也就不能用了

    18K82

    flutter_bloc使用解析---骚年，你还在手搭bloc吗！

    flutter_bloc使用将从下图的三个维度说明 [flutter_bloc] 前言 首先，有很多的文章在说flutter bloc模式的应用，但是百分之八九十的文章都是在说，使用StreamController...没办法，只能去bloc的github上去找使用方式，最后去bloc官网翻文档。 蛋痛，各位叼毛，就不能好好说说flutter_bloc的使用吗？非要各种抄bloc模式提出作者的那俩篇文章。...使用框架，不拘泥框架，在观察者模式的思想上，灵活的去使用flutter_bloc提供Api，这样可以大大的缩短我们的开发时间！...，使用BlocProvider.of(context)调用全局XxxBloc中事件，这就起到了一种跨页面调用事件的效果 使用全局Bloc做跨页面事件时，应该明白，当你关闭Bloc对应的页面...listenWhen获取先前的bloc状态和当前的bloc状态并返回一个布尔值。如果listenWhen返回true，listener将使用调用state。

    6.5K41

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

    如下方代码所示，利用 scoped_model 实现状态管理只需要三步 ： 定义 Model 的实现，如 CountModel ，并且在状态改变时执行 notifyListeners() 方法。...二、BloC BloC 全称 Business Logic Component ，它属于一种设计模式，在 Flutter 中它主要是通过 Stream 与 SteamBuilder 来实现设计的，所以...当然，如果和 rxdart 结合可以简化 StreamController 的一些操作，同时如果你需要利用 BloC 模式实现状态共享，那么自己也可以封装多一层 InheritedWidgets 的嵌套...当然，更多的功能和更好的拓展性，也造成了代码的复杂度和上手难度 ，因为 flutter_redux 的代码使用篇幅问题，这里就不展示所有代码了，需要看使用代码的可直接从 demo 获取，现在我们直接看...而使用中我们组装的 dependencies 最后都会通过 ViewService 提供调用调用能力，比如调用 buildAdapter 用于列表能力，调用 buildComponent 提供独立控件能力等

    2.8K20

    Flutter 移动端架构实践：Widget-Async-Bloc-Service

    这是通过业务逻辑组件（BLoCs）完成的，这是在2018 DartConf时首次引入的模式。 理想化的BLoC是 将业务逻辑与UI层分离 ，并能够跨多个平台保证代码的高度可复用性。...2.返回一个Future的结果，调用的代码可以等待结果并相应地执行某些操作。 3.抛出一个异常，调用的代码可以通过try/catch捕获它，并在需要时展示一个警告。...( builder: (_) => SignInBloc(auth: auth), dispose: (_, bloc) => bloc.dispose(), child...dispose回调进行配置的，我们使用它来处理BLoC并关闭相应的StreamControllers。...要了解它们，您还需要熟悉Stream和StreamBuilder。 使用Stream时，需要考虑以下因素： 流的连接状态是什么（没有，等待，活跃，完成）？ 流是被单次还是多次订阅？

    20.8K20

    【Flutter 专题】100 何为 Flutter Widgets ？

    () 过程中执行；initState() 只是创建了 State 对象但是未初始化完成； ready 对象准备好且 dispose() 方法未执行； defunct 对象销毁，在 dispose() 执行时进行销毁...ProxyWidget ProxyWidget 作为一个抽象的代理 Widget 并没有实质性的作用，只是在父类和子类需要传递信息时使用；主要有 InheritedWidget 和 ParentDataWidget...Bloc 或 Provider 等状态管理的朋友都了解过 InheritedWidget，主要都是对 InheritedWidget 的优化和封装；可以在树结构中传递信息，当使用 InheritedWidget...covariant RenderObject renderObject) { } } updateRenderObject 是在 Widget 更新后，修改对应的 RenderObject 对象，在每次更新时都会调用...；didUnmountRenderObject 是在 RenderObject 在 Render Tree 中删除时调用； Key / GlobalKey Key 可以用来控制在 Widget 重建时是否与其他

    1K31

    【Flutter 状态管理】第一论： 对状态管理的看法与理解

    但FloatingActionButton 组件继承自 StatelessWidget，也就是说它并没有改变自身状态的能力。那点击时，为什么状态会发生变化呢？...这就相当于观察者模式中，两个订阅者 同时监听一个发布者 。...2.通过 flutter_bloc 实现状态管理: 源码位置 我们前面说过，状态管理的目的在于：让状态可以共享及在更新状态时可以同步更新相关组件显示，且将状态变化逻辑和界面构建进行分离。...注: debounce : 当调用动作 n 毫秒后，才会执行该动作，若在这 n 毫秒内又调用此动作则将重新计算执行时间。...repository 层作为数据的获取方式是完全独立的，比如 todo 的案例，Bloc 版和 Provider 可以共用一个 repository 层，因为即使框架的使用方式有差异，但数据的获取方式是不变的

    2.1K20

    掌握Flutter底部导航栏：畅游导航之旅

    我们将介绍如何创建基本的底部导航栏结构，自定义其外观，实现与页面的切换和状态管理，并探索一些高级功能，如徽章、动画效果等。...Flutter提供了多种状态管理方法，其中包括使用Provider和Bloc进行状态管理。在本节中，我们将介绍如何利用这两种方法来实现底部导航栏的状态管理。...6.2 使用Bloc进行状态管理 Bloc是另一个常用的Flutter状态管理库，它基于流（Stream）和事件（Event）的模式来管理应用程序的状态，并提供了一种清晰、可维护的方式来组织和处理复杂的业务逻辑...通过创建一个NavigationBloc来处理底部导航栏的状态，并在需要时向Bloc发送事件来更新状态，可以实现底部导航栏的状态管理。...此外，我们还探讨了如何利用状态管理库（如Provider和Bloc）来管理底部导航栏的状态，以及如何实现一些高级功能，如添加徽章、动态更改导航栏项以及实现动画效果等。

    5K10

    初学者的 Flutter bloc

    Flutter Bloc 很容易使用，因为我们和我们团队可以很快明白相关的概念，不管你是什么水平，该库有非常好的文档和很多的案例，它在 Flutter 社区中是广泛使用的那个，所以我们如果有任何问题，我们都可以在网络上通过简单的搜索找到对应的解决方案...这个挂件有 listener 和 builder 函数，所以我们可以一起使用。 BlocSelector 这个挂件允许开发者基于当前 bloc 状态选择一个新的值指定更新。...Header 这是个简单的挂件，我们展示了两行文本和一个圆形的头像。 Category 挂件 展示通过调用 getGenres 方法 API 返回的不同的类型。...首页 这个页面很重要，所以这里我们使用了两个 Bloc 挂件： MultiBlocProvider 和 RepositoryProvider。...Flutter bloc 是一个很好的选择，正如你所看到的，它并不复杂并且很容易理解怎么使用它的核心概念。并且，它提供了很多方法来管理我们的视图和挂件。

    82810

    Flutter BLoC 教程：使用 BLoC 模式的状态管理

    模式的优缺点 在我们进入 flutter bloc 教程之前，我们说说 bloc 设计模式的优缺点。...✅ 简单应用不推荐使用 ✅ 有更多标准化代码，但可以通过扩展解决 Flutter BLoC 教程目标 我们将构建相关简单的应用，来演示 BLoC 如何使用流来管理状态，并为 bloc 编写一些测试。...因为一个应用程序中会有很多事件，我们创建一个抽象类并继承它，并在需要处理和传递多个事件给 BLoC 时进行扩展。...如果它们相等，将用于测试 bloc 使用 BLoC 模式进行 Event 和 State 管理 class AppBlocBloc extends Bloc { final List textList...总结 希望该教程对你开始学习使用 BLoC 模式管理状态有所帮助。

    2.3K20

    为啥Flutter Hooks没有受到太多关注和青睐？

    用它可以轻松在页面上创建 BLoC、MobX 存储或通知程序对象。...如果需要，你还可以返回一个在放弃小部件时将调用的函数，如下所示： useEffect(() { store.loadData(); return store.dispose; }, const...const[] 表示在未放弃（dispose）小部件之前，请勿调用 effect。你可以提供一组参数，当其中一个参数更改时将调用 effect。下面来看看另一个关于动画的例子。...这一步容易，在使用我们的自定义 Hook 时必须同时提供 length 和 initialIndex。 你会看到有一组 keys 被传递给了 useSingleTickerProvider 。...我喜欢 Hooks，并在我的所有项目中都使用它。我通常将它与 Provider 和 MobX 结合使用。 你可以在 pub 上找到 Hooks，附带的文档都很完善。

    1.5K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券