一 Flutter学习 状态管理

在中有个新概念:BLOC
它是一种利用 方式构建应用的方法,这是一个由流构成的完全异步的世界 。先解释一下什么是流
流:
即,用现实生活的例子就是一个带有两端的管道,只有一个允许在其中插入一些东西 。当你将某物插入管道时,它会在管道内流动并从另一端流出 。
其实它是为处理异步事件而生的 。
很像观察者模式,有个监听者一直监听着出口,一旦有改变的数据流出,就做出业务改变 。也很像vue的双向数据绑定 。
BLoC:
BLoC是一种利用 方式构建应用的方法,这是一个由流构成的完全异步的世界 。
实现
下面的例子其实都是中的例子,单纯想记录一下
1. main.dart:
import 'package:flutter/material.dart';import 'package:flutter_bloctest/BlocProvider.dart';import 'package:flutter_bloctest/TopPage.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget{//statelessWidget是没有状态的控件,与statefulWidget相对@overrideWidget build(BuildContext context) {return BlocProvider(//BlocProvider是自己写的代码child: MaterialApp( //继承自StatefulWidget,一个封装了很多所必须要的组件的小部件,一般作为顶层widget使用title: 'scoped',theme: ThemeData.dark(),home: TopPage(),//一般在MaterialApp的home我们会放一个Scaffold,可以看到TopPage就是return一个Scaffold的),);}}
.dart:
import 'dart:async';import 'package:flutter/material.dart';//创建一个blocclass CountBLoC {int _count;StreamController _countController;CountBLoC() {_count = 0;/*注册一个int类型的StreamController这里broadcast是因为一个单订阅流不能有多个收听者,我们的app中有2个页面都需要监听这个数据,所以需要将其转为广播流 。“广播流允许任意数量的收听者,且无论是否有收听者,他都能产生事件 。所以中途进来的收听者将不会收到之前的消息 。”*/_countController = StreamController.broadcast();}Stream get stream => _countController.stream;//暴露出流int get value => _count;//暴露出valueincrement() {_countController.sink.add(++_count);//把新数据add进流的sink中}dispose() {_countController.close(); //关闭流}}

一  Flutter学习 状态管理

文章插图
.dart:
import 'package:flutter/material.dart';import 'CountBLoC.dart';/*InheritedWidget是Flutter的一个功能型的Widget基类,它能有效地将数据在当前Widget树中向它的子widget树传递 。*/class BlocProvider extends InheritedWidget {@overrideCountBLoC bloc = CountBLoC();BlocProvider({Key key, Widget child}) : super(key: key, child: child);//用于控制刷新时机@overridebool updateShouldNotify(InheritedWidget oldWidget) {// TODO: implement updateShouldNotifyreturn false;}/*of方法,用于获取到bloc它的子Widget树可以通过 BuildContext.inheritedFromWidgetOfExactType()方法获得最近的指定类型的Inherited widget,进而获取它的共享数据*/static CountBLoC of(BuildContext context) =>(context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider).bloc;}
4. .dart:
import 'package:flutter/material.dart';import 'package:flutter_bloctest/BlocProvider.dart';import 'package:flutter_bloctest/UnderPage.dart';class TopPage extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildfinal bloc = BlocProvider.of(context);//检索blocreturn Scaffold(appBar: AppBar(title: Text('Top Page'),),body: Center(/*StreamBuilder其实是一个StatefulWidget,它通过监听stream,发现有数据输出时,自动重建,调用builder方法*/child: StreamBuilder