在flutter中有個新概念：BLOC
它是一種利用reactive programming方式構建應用的方法，這是一個由流構成的完全異步的世界。先解釋一下什么是流

流：

即Stream，用現實生活的例子就是一個帶有兩端的管道，只有一個允許在其中插入一些東西。當你將某物插入管道時，它會在管道內流動并從另一端流出。
其實它是為處理異步事件而生的。

• 這個大機器就是StreamController，它是創建流的方式之一。
• StreamController有一個入口，叫做sink
• sink可以使用add方法放東西進來，放進去以后就不再關心了。
• 當有東西從sink進來以后，我們的機器就開始工作啦，空空空。
• StreamController有一個出口，叫做stream
• 機器處理完畢后就會把產品從出口丟出來，但是我們并不知道什么時候會出來，所以我們需要使用listen方法一直監聽這個出口。
• 而且當多個物品被放進來了之后，它不會打亂順序，而是先入先出。

很像觀察者模式，有個監聽者一直監聽著出口，一旦有改變的數據流出，就做出業務改變。也很像vue的雙向數據綁定。

BLoC：

BLoC是一種利用reactive programming方式構建應用的方法，這是一個由流構成的完全異步的世界。

• 用StreamBuilder包裹有狀態的部件，streambuilder將會監聽一個流
• 這個流來自于BLoC
• 有狀態小部件中的數據來自于監聽的流。
• 用戶交互手勢被檢測到，產生了事件。例如按了一下按鈕。
• 調用bloc的功能來處理這個事件
• 在bloc中處理完畢后將會把最新的數據add進流的sink中
• StreamBuilder監聽到新的數據，產生一個新的snapshot，并重新調用build方法
• Widget被重新構建

實現

下面的例子其實都是https://www.jianshu.com/p/7573dee97dbb中的例子，單純想記錄一下

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的),);} }

CountBLoC.dart:

import 'dart:async';import 'package:flutter/material.dart';//創建一個bloc class CountBLoC {int _count;StreamController<int> _countController;CountBLoC() {_count = 0;/*注冊一個int類型的StreamController這里broadcast是因為一個單訂閱流不能有多個收聽者，我們的app中有2個頁面都需要監聽這個數據，所以需要將其轉為廣播流。“廣播流允許任意數量的收聽者，且無論是否有收聽者，他都能產生事件。所以中途進來的收聽者將不會收到之前的消息。”*/_countController = StreamController<int>.broadcast();}Stream<int> get stream => _countController.stream; //暴露出流int get value => _count; //暴露出valueincrement() {_countController.sink.add(++_count); //把新數據add進流的sink中}dispose() {_countController.close(); //關閉流} }

BlocProvider.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. TopPage.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<int>(stream: bloc.stream,initialData: bloc.value,//獲取初始化的值builder: (BuildContext context, AsyncSnapshot<int> snapshot) {return Text('You hit me:${snapshot.data} times', //取出datastyle: Theme.of(context).textTheme.display1, //小字體，display2是中字體...);}),),floatingActionButton: FloatingActionButton(child: Icon(Icons.navigate_next),//跳到下個頁面onPressed: ()=>Navigator.of(context).push(MaterialPageRoute(builder: (context)=>UnderPage())),),);} }

5. UnderPage:

import 'package:flutter/material.dart'; import 'package:flutter_bloctest/BlocProvider.dart';class UnderPage extends StatelessWidget {@overrideWidget build(BuildContext context) {final bloc = BlocProvider.of(context);print("build");return Scaffold(appBar: AppBar(title: Text('Under Page'),),body: Center(child: StreamBuilder<int>(stream: bloc.stream,initialData: bloc.value,builder: (BuildContext context, AsyncSnapshot<int> snapshot) => Text("You hit me : ${snapshot.data} times",style: Theme.of(context).textTheme.display1,)),),floatingActionButton: FloatingActionButton(onPressed: () => bloc.increment(), //調用添加value的那個函數child: Icon(Icons.add),),);} }

附上github：https://github.com/aopo1104/flutterLearn

參考資料：

https://element.eleme.cn/#/zh-CN/component/icon
https://www.jianshu.com/p/7573dee97dbb
https://www.jianshu.com/p/346dc2a8cbde

總結

以上是生活随笔為你收集整理的Flutter学习（一） 状态管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。