Flutter 研发阶段性总结(四) 基本设计模式BLoC

本文介绍了Flutter中的BLoC设计模式,它是一种响应式编程模式,源于DartConf 2018。BLoC通过将变化视为流,实现了业务逻辑与界面的解耦。文章详细讲解了BLoC的实现,包括流的概念、基本的BLoC结构、状态管理和界面与BLoC的绑定,提供了具体的代码示例。
摘要由CSDN通过智能技术生成

BLoC(Business Logic Component)设计模式是一个新鲜词汇, 在2018年1月的DartConf上被提出,其实是在Rx系列思想之下发展出来的响应式编程模式。
PS: 有时候从后端研发的角度来看,前端领域的一些想法确实挺前卫的。
其核心在于:将变量的变化看作一种流,并把Widget的状态绑定在流上,从而当变量改变时候,Widget接收到事件并作出响应的改变。因此BLoC可以做到完全将业务逻辑封装起来,Widget仅通过输入、输出和逻辑模块交互,做到完全的解耦。
BLoC的结构盗图一下:
在这里插入图片描述

BLoC的具体实现

这里的实现 90% 出自这位知乎大佬的文章,各位可以去围观一下:
在 Flutter 中使用 Bloc 来处理数据并更新 UI

流 Stream 的概念

可以把Stream看作管道,事件从一端输入,监听方从另一端获取事件并作出相应的改变。这里我们的Widget需要使用到StreamBuilder。

在Flutter中 StreamController 管理流, controller.sink 是入口, controller.stream 是出口

基本的BLoC实现

假设我们需要一个环境变量代表开和关,而App有多个页面的Switch开关控件与这个变量进行关联,我需要在任何页面拨动开关的时候,其它页面对应的开关的状态保持一致。
这里我们可以设想到的输入事件有两种:

  1. 变量的值改变 --> 导致开关状态变化
  2. 用户拨动开关 --> 导致值改变

因此会有两个Stream: 值的Stream,和用户操作事件Stream

class AppSwitchBLoC {
   
    bool _switchValue = false;
	StreamController<bool> _appSwitchController = StreamControler();
	// 用于值改变事件的输入(私有变量,不暴露出来)
	StreamSink<bool> get _inSwitch = _appSwitchController.sink;
	// 用于值改变事件的输入(值的输出暴露出来)
	Stream<bool> get outSwitchValue = _appSwitchController.stream;
	
	StreamController _switchActionController = StreamController();
	// 用户输入触发(暴露出来)
	StreamSink get changeSwitchValue = _switchActionController.sink;
	
	AppSwitchBLoC() {
   
	  // 指定_handleEvent函数处理用户的输入事件
	  _switchActionController.stream.listen(_handleEvent);
	}

    _handleEvent(
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值