Flutter之BLOC
flutter_bloc 是一个bloc第三方库,这个库很方便的让你集成bloc模式,这个库结合了RXDart,先了解一下bloc 的模式吧
1,widget 触发event 事件
2,bloc 接收event 事件并作出逻辑处理
3 ,并把逻辑处理结果给返回出来
4,UI展示数据
其实它有点像mvvm ,Event只是出发事件,并不能传值,bloc 接收这个event,根据event去找到具体的方法去处理逻辑,之后把结果返回,如果再不明白,我举个例子,我去饭店吃饭去告诉老板点一个大盘鸡(这个是event),老板根据菜名找到具体的厨师(sink),厨师做好大盘鸡(这是逻辑处理)之后告诉老板做好(state)老板把菜端上来(UI跟数据改变)
flutter_bloc 提供几个api 根据这几个API 就可以快速搭建bloc
BlocBuilder
BlocProvider
BlocProviderTree
BlocListener
BlocListenerTree
BlocBuilder
有三个属性 bloc condition builder
BlocBuilder(
bloc: ,这个添加bloc dart
condition: (previousState, currentState){ return true;},//可选默认返回true
builder: (BuildContext context, List state) {}state 返回数据
)。
BlocProvider
这个可以管理全局变量
BlocProvider( bloc:,这个添加bloc dart 把这个bloc 传递其它字界面使用 child:LogIn(),子类 )
子widget 通过BlocProvider.of<LogBloc>(context) 获取这个bloc
如果涉及到push 可以通过这种模式传递
Navigator.push(context, new MaterialPageRoute( builder: (Context)=>BlocProvider( bloc:LogBloc(), child:HomePage1(), )));
BlocProviderTree
可以管理多个状态
一个widget 涉及多个state 可以用它管理
BlocProviderTree(
blocProviders: [
BlocProvider<BlocA>(bloc: BlocA()),
BlocProvider<BlocB>(bloc: BlocB()),
BlocProvider<BlocC>(bloc: BlocC()),
],
child: ChildA(),
)
demo
import 'package:flutter/material.dart';
import 'package:flutter_app/bloc/counter_bloc_demo.dart'; class BlocDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CounterProvider(
bloc: CounterBloc(),
child: Scaffold(
appBar: AppBar(
title: Text('BlocDemo'),
elevation: 0.0,
),
body: CounterHome(),
floatingActionButton: CounterActionButton(),
),
);
}
}
import 'dart:async'; import 'package:flutter/material.dart'; class CounterHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
CounterBloc _counterBloc = CounterProvider.of(context).bloc; return Center(
child: StreamBuilder(
initialData: 0,
stream: _counterBloc.count,
builder: (context, snapshot) {
return ActionChip(
label: Text('${snapshot.data}'),
onPressed: () {
// _counterBloc.log();
_counterBloc.counter.add(1);
},
);
},
),
);
}
} class CounterActionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
CounterBloc _counterBloc = CounterProvider.of(context).bloc; return FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
// _counterBloc.log();
_counterBloc.counter.add(1);
},
);
}
} class CounterProvider extends InheritedWidget {
final Widget child;
final CounterBloc bloc; CounterProvider({
this.child,
this.bloc,
}) : super(child: child); static CounterProvider of(BuildContext context) =>
context.inheritFromWidgetOfExactType(CounterProvider); @override
bool updateShouldNotify(CounterProvider oldWidget) {
return true;
}
} class CounterBloc {
int _count = 0; final _counterActionController = StreamController<int>();
StreamSink<int> get counter => _counterActionController.sink; final _counterController = StreamController<int>();
Stream<int> get count => _counterController.stream; CounterBloc() {
_counterActionController.stream.listen(onData);
} void onData(int data) {
print('$data');
_count = data + _count;
_counterController.add(_count);
} void disponse() {
_counterActionController.close();
_counterController.close();
} void log() {
print('BLoC');
}
}
Flutter之BLOC的更多相关文章
- Flutter Bloc状态管理 简单上手
我们都知道,Flutter中Widget的状态控制了UI的更新,比如最常见的StatefulWidget,通过调用setState({})方法来刷新控件.那么其他类型的控件,比如StatelessWi ...
- Flutter 状态管理之BLoC
在正式介绍 BLoC之前, 为什么我们需要状态管理.如果你已经对此十分清楚,那么建议直接跳过这一节.如果我们的应用足够简单,Flutter 作为一个声明式框架,你或许只需要将 数据 映射成 视图 就可 ...
- flutter Provide 状态管理篇
Provide是Google官方推出的状态管理模式.官方地址为: https://github.com/google/flutter-provide 现在Flutter的状态管理方案很多,redux. ...
- bloc控制读写文件
import 'package:flutter/material.dart'; import 'dart:io'; import 'package:path_provider/path_provide ...
- (转)flutter 新状态管理方案 Provide (一)-使用
flutter 新状态管理方案 Provide (一)-使用 版权声明:本文为博主原创文章,基于CC4.0协议,首发于https://kikt.top ,同步发于csdn,转载必须注明出处! ...
- 基于 Flutter 以两种方式实现App主题切换
概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一 ...
- 【Flutter】348- 写给前端工程师的 Flutter 教程
点击上方"前端自习课"关注,学习起来~ | 导语 最爱折腾的就是前端工程师了,从 jQuery 折腾到 AngularJs,再折腾到 Vue.React.最爱跨屏的也是前端工程师, ...
- Flutter中高级培训
Flutter中高级培训 一.简介 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.Flutter可以与现有的代码一起工作.本课程全面介绍Flutter ...
- flutter,SliverPersistentHeader实现Tab顶部吸附固定效果
直接上代码啦 import 'package:flutter/material.dart'; class StickyDemo extends StatefulWidget { @override _ ...
随机推荐
- java请求url可以带参数
/** * * @param urlStr * url * @param content * 提交的参数 * @param encoding * 编码格式 * @return */ public st ...
- MySQL将某个数据库下的所有表的存储引擎修改为InnoDB类型语句
如何将mysql数据库中的MyISAM类型表更改为InnoDB类型的表 改单个表 ALTER TABLE TABLENAME ENGINE=InnoDB; ALTER TABLE TABLENAME ...
- linux网络编程之socket编程(一)
今天开始,继续来学习linux编程,这次主要是研究下linux下的网络编程,而网络编程中最基本的需从socket编程开始,下面正式开始学习: 什么是socket: 在学习套接口之前,先要回顾一下Tcp ...
- linux系统编程之信号(一)
今天起,开始新的知识的学习,对于上个系列进程的学习还差一个理论上的总结,这个会下次补回来,以便通过实践之后,再用理论将其巩固一下,好了,话不多说,开始进入这个主题的学习----信号,很重要,但不是太容 ...
- TOPk实现(python)
import heapq class TopK: def __init__(self, iterable, k): self.minheap = [] self.capacity = k self.i ...
- spring DefaultListableBeanFactory 概述
有人说,DefaultListableBeanFactory是spring的发动机,其实重要性不为过.TA的整体类图如下: 这里先概述接口部分: BeanFact ...
- 1216 Vue基础
目录 前端框架 Vue 1.简介 1.1 优点 2 使用 2.1 基础 2.2 文本指令 2.3 事件指令 2.4 属性指令 JS面向对象补充 前端框架 angular ---更新程度太快,且不向下兼 ...
- flask框架下读取mysql数据 转换成json格式API
研究了一天 因为需要从数据库拿数据然后转换成json的格式 expose出去为 API 发现一条数据是容易,两条以上我居然搞了这么久 好歹出来了 先贴一下 后面更新 mysql的操作 比较容易了htt ...
- python的isinstance()函数
以下是使用isinstance()函数的实例: a = isinstance(a,int) # 结果返回 True isinstance(a,str) # 结果返回 False 即:第1个参数是第2个 ...
- zookeeper先验知识(2PC+paxos)
一.2PC两阶段提交: 在分布式事务中,每个机器节点只能够明确知道自己事务操作的结果,是成功还是失败,而无法获取其他分布式节点的操作结果,因此在事务操作需要跨多个分布式节点时,需要引入一个协调者统一调 ...