Flutter-BLoC-第二講

時間  2019-11-06
標籤 flutter bloc 第二 简体版
原文   原文鏈接

本篇已同步到 我的博客 ，歡迎常來。react

[譯文]Reactive Programming - Streams - BLoC實際用例git

原文地址github

介紹編程

在介紹了BLoC，Reactive Programming和Streams的概念後，我在一段時間以前作了一些介紹，儘管與我分享一些我常用而且我的以爲很是有用的模式（至少對我而言）可能會頗有趣。這些模式使我在開發過程當中節省了大量時間，並使個人代碼更易於閱讀和調試。服務器

我要談的話題是：markdown

  • 1.BLoC Provider and InheritedWidget
  • 2.在哪裏初始化BLoC？
  • 3.事件狀態（容許根據事件響應狀態轉換）
  • 4.表格驗證（容許根據條目和驗證控制表單的行爲）
  • 5.Part Of（容許Widget根據其在列表中的存在來調整其行爲）

完整的源代碼能夠在GitHub上找到。架構

1.BLoC Provider and InheritedWidget

我藉此文章的機會介紹個人BlocProvider的另外一個版本，它如今依賴於一個InheritedWidget。併發

使用InheritedWidget的優勢是咱們得到了性能。app

1.1. 以前的實現

我以前版本的BlocProvider實現爲常規StatefulWidget，以下所示：less

abstract class BlocBase {
  void dispose();
}

// Generic BLoC provider
class BlocProvider<T extends BlocBase> extends StatefulWidget {
  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
  }): super(key: key);

  final T bloc;
  final Widget child;

  @override
  _BlocProviderState<T> createState() => _BlocProviderState<T>();

  static T of<T extends BlocBase>(BuildContext context){
    final type = _typeOf<BlocProvider<T>>();
    BlocProvider<T> provider = context.ancestorWidgetOfExactType(type);
    return provider.bloc;
  }

  static Type _typeOf<T>() => T;
}

class _BlocProviderState<T> extends State<BlocProvider<BlocBase>>{
  @override
  void dispose(){
    widget.bloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context){
    return widget.child;
  }
}
複製代碼

我使用StatefulWidget從dispose（）方法中受益，以確保在再也不須要時釋放BLoC分配的資源。

這很好用但從性能角度來看並非最佳的。

context.ancestorWidgetOfExactType()是一個爲時間複雜度爲O(n)的函數，爲了檢索某種類型的祖先，它將對widget樹 作向上導航，從上下文開始，一次遞增一個父，直到完成。若是從上下文到祖先的距離很小（即O(n)結果不多），則能夠接受對此函數的調用，不然應該避免。這是這個函數的代碼。

@override
Widget ancestorWidgetOfExactType(Type targetType) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    Element ancestor = _parent;
    while (ancestor != null && ancestor.widget.runtimeType != targetType)
        ancestor = ancestor._parent;
    return ancestor?.widget;
}
複製代碼

1.2. 新的實現

新實現依賴於StatefulWidget，並結合InheritedWidget：

Type _typeOf<T>() => T;

abstract class BlocBase {
  void dispose();
}

class BlocProvider<T extends BlocBase> extends StatefulWidget {
  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
  }): super(key: key);

  final Widget child;
  final T bloc;

  @override
  _BlocProviderState<T> createState() => _BlocProviderState<T>();

  static T of<T extends BlocBase>(BuildContext context){
    final type = _typeOf<_BlocProviderInherited<T>>();
    _BlocProviderInherited<T> provider = 
            context.ancestorInheritedElementForWidgetOfExactType(type)?.widget;
    return provider?.bloc;
  }
}

class _BlocProviderState<T extends BlocBase> extends State<BlocProvider<T>>{
  @override
  void dispose(){
    widget.bloc?.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context){
    return new _BlocProviderInherited<T>(
      bloc: widget.bloc,
      child: widget.child,
    );
  }
}

class _BlocProviderInherited<T> extends InheritedWidget {
  _BlocProviderInherited({
    Key key,
    @required Widget child,
    @required this.bloc,
  }) : super(key: key, child: child);

  final T bloc;

  @override
  bool updateShouldNotify(_BlocProviderInherited oldWidget) => false;
}
複製代碼

優勢是這個解決方案是性能。

因爲使用了InheritedWidget，它如今能夠調用context.ancestorInheritedElementForWidgetOfExactType()函數，它是一個O（1），這意味着祖先的檢索是當即的，如其源代碼所示：

@override
InheritedElement ancestorInheritedElementForWidgetOfExactType(Type targetType) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    final InheritedElement ancestor = _inheritedWidgets == null 
                                    ? null 
                                    : _inheritedWidgets[targetType];
    return ancestor;
}
複製代碼

這來自於全部InheritedWidgets都由Framework記憶的事實。

  • 爲何使用 ancestorInheritedElementForWidgetOfExactType ？
  • 您可能已經注意到我使用 ancestorInheritedElementForWidgetOfExactType 方法而不是一般的 inheritFromWidgetOfExactType 。
  • 緣由是我不但願上下文調用的BlocProvider被註冊爲InheritedWidget的依賴項，由於我不須要它。

1.3. 如何使用新的BlocProvider？

1.3.1.注入BLoC
Widget build(BuildContext context){
    return BlocProvider<MyBloc>{
        bloc: myBloc,
        child: ...
    }
}
複製代碼
1.3.2. 檢索BLoC
Widget build(BuildContext context){
    MyBloc myBloc = BlocProvider.of<MyBloc>(context);
    ...
}
複製代碼

2.在哪裏初始化BLoC？

要回答這個問題，您須要弄清楚其使用範圍。

2.1.應用程序中隨處可用

假設您必須處理與用戶身份驗證/配置文件，用戶首選項，購物籃相關的一些機制, 可從應用程序的任何可能部分(例如，從不一樣頁面)得到得到BLoC(),存在兩種方式使這個BLoC可訪問。

2.1.1.使用全局單例
import 'package:rxdart/rxdart.dart';

class GlobalBloc {
  ///
  /// 與此BLoC相關的流
  ///
  BehaviorSubject<String> _controller = BehaviorSubject<String>();
  Function(String) get push => _controller.sink.add;
  Stream<String> get stream => _controller;

  ///
  /// Singleton工廠
  ///
  static final GlobalBloc _bloc = new GlobalBloc._internal();
  factory GlobalBloc(){
    return _bloc;
  }
  GlobalBloc._internal();
  
  ///
  /// Resource disposal
  ///
  void dispose(){
    _controller?.close();
}

GlobalBloc globalBloc = GlobalBloc();
複製代碼

要使用此BLoC，您只需導入該類並直接調用其方法，以下所示：

import 'global_bloc.dart';

class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        globalBloc.push('building MyWidget');
        return Container();
    }
}
複製代碼

這是一個能夠接受的解決方案，若是你須要有一個BLoC是惟一的，須要從應用程序內的任意位置訪問。

  • 這是很是容易使用;
  • 它不依賴於任何BuildContext ;
  • 沒有必要經過任何BlocProvider去尋找 BLoC;
  • 爲了釋放它的資源，只需確保將應用程序實現爲StatefulWidget，並在應用程序Widget 的重寫dispose（）方法中調用globalBloc.dispose（）

許多純粹主義者反對這種解決方案。我不知道爲何，可是...因此讓咱們看看另外一個......

2.1.2. 把它放在一切之上

在Flutter中，全部頁面的祖先自己必須是MaterialApp的父級。這是因爲這樣的事實，一個頁面（或路由）被包裝在一個OverlayEntry，一個共同的孩子堆棧的全部頁面。

換句話說，每一個頁面都有一個Buildcontext，它獨立於任何其餘頁面。這就解釋了爲何在不使用任何技巧的狀況下，2頁（路線）不可能有任何共同點。

所以，若是您須要在應用程序中的任何位置使用BLoC，則必須將其做爲MaterialApp的父級，以下所示：

void main() => runApp(Application());

class Application extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<AuthenticationBloc>(
      bloc: AuthenticationBloc(),
      child: MaterialApp(
        title: 'BLoC Samples',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: InitializationPage(),
      ),
    );
  }
}
複製代碼

2.2.可用於子樹

大多數狀況下，您可能須要在應用程序的某些特定部分使用BLoC。

做爲一個例子，咱們能夠想到的討論主題，其中集團將用於

  • 與服務器交互以檢索，添加，更新帖子
  • 列出要在特定頁面中顯示的線程
  • ...

所以，若是您須要在應用程序中的任何位置使用BLoC，則必須將其做爲MaterialApp的父級，以下所示：

class MyTree extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return BlocProvider<MyBloc>(
      bloc: MyBloc(),
      child: Column(
        children: <Widget>[
          MyChildWidget(),
        ],
      ),
    );
  }
}

class MyChildWidget extends StatelessWidget {
  @override 
  Widget build(BuildContext context){
    MyBloc = BlocProvider.of<MyBloc>(context);
    return Container();
  }
}
複製代碼

這樣一來，全部widgets均可以經過對呼叫BlocProvider.of方法 訪問BLoC

附： 如上所示的解決方案並非最佳解決方案，由於它將在每次重建時實例化BLoC。 後果：

  • 您將丟失任何現有的BLoC內容
  • 它會耗費CPU時間，由於它須要在每次構建時實例化它。

一個更好的辦法，在這種狀況下，是使用StatefulWidget從它的持久受益國，具體以下：

class MyTree extends StatefulWidget {
 @override
  _MyTreeState createState() => _MyTreeState();
}
class _MyTreeState extends State<MyTree>{
  MyBloc bloc;
  
  @override
  void initState(){
    super.initState();
    bloc = MyBloc();
  }
  
  @override
  void dispose(){
    bloc?.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context){
    return BlocProvider<MyBloc>(
      bloc: bloc,
      child: Column(
        children: <Widget>[
          MyChildWidget(),
        ],
      ),
    );
  }
}
複製代碼

使用這種方法，若是須要重建「 MyTree 」小部件，則沒必要從新實例化BLoC並直接重用現有實例。

2.3.僅適用於一個小部件

這涉及BLoC僅由一個 Widget使用的狀況。

在這種狀況下，能夠在Widget中實例化BLoC。

3.事件狀態（容許根據事件響應狀態轉換）

有時，處理一系列多是順序或並行，長或短，同步或異步以及可能致使各類結果的活動可能變得很是難以編程。您可能還須要更新顯示以及進度或根據狀態。

第一個用例旨在使這種狀況更容易處理。

該解決方案基於如下原則：

  • 發出一個事件;
  • 此事件觸發一些致使一個或多個狀態的動做;
  • 這些狀態中的每個均可以反過來發出其餘事件或致使另外一個狀態;
  • 而後，這些事件將根據活動狀態觸發其餘操做;
  • 等等…

爲了說明這個概念，咱們來看兩個常見的例子：

應用初始化

  • 假設您須要運行一系列操做來初始化應用程序。操做可能與服務器的交互相關聯（例如，加載一些數據）。 在此初始化過程當中，您可能須要顯示進度條和一系列圖像以使用戶等待。

認證

  • 在啓動時，應用程序可能須要用戶進行身份驗證或註冊。 用戶經過身份驗證後，將重定向到應用程序的主頁面。而後，若是用戶註銷，則將其重定向到認證頁面。

爲了可以處理全部可能的狀況，事件序列，可是若是咱們認爲能夠在應用程序中的任何地方觸發事件，這可能變得很是難以管理。

這就是BlocEventState，兼有BlocEventStateBuilder，能夠幫助不少...

3.1. BlocEventState

BlocEventState背後的想法是定義一個BLoC：

  • 接受事件做爲輸入;
  • 當發出新事件時調用eventHandler;
  • eventHandler 負責根據事件採起適當的行動併發出狀態做爲迴應。

下圖顯示了這個想法：

image.png

這是這類的源代碼。解釋以下：

import 'package:blocs/bloc_helpers/bloc_provider.dart';
import 'package:meta/meta.dart';
import 'package:rxdart/rxdart.dart';

abstract class BlocEvent extends Object {}
abstract class BlocState extends Object {}

abstract class BlocEventStateBase<BlocEvent, BlocState> implements BlocBase {
  PublishSubject<BlocEvent> _eventController = PublishSubject<BlocEvent>();
  BehaviorSubject<BlocState> _stateController = BehaviorSubject<BlocState>();

  ///
  /// 要調用以發出事件
  ///
  Function(BlocEvent) get emitEvent => _eventController.sink.add;

  ///
  /// 當前/新狀態
  ///
  Stream<BlocState> get state => _stateController.stream;

  ///
  /// 事件的外部處理
  ///
  Stream<BlocState> eventHandler(BlocEvent event, BlocState currentState);

  ///
  /// initialState
  ///
  final BlocState initialState;

  //
  // 構造函數
  //
  BlocEventStateBase({
    @required this.initialState,
  }){
    //
    // 對於每一個接收到的事件，咱們調用[eventHandler]併發出任何結果的newState
    //
    _eventController.listen((BlocEvent event){
      BlocState currentState = _stateController.value ?? initialState;
      eventHandler(event, currentState).forEach((BlocState newState){
        _stateController.sink.add(newState);
      });
    });
  }

  @override
  void dispose() {
    _eventController.close();
    _stateController.close();
  }
}
複製代碼

如您所見，這是一個須要擴展的抽象類，用於定義eventHandler方法的行爲。

他公開：

  • 一個Sink（emitEvent）來推送一個事件 ;
  • 一個流（狀態）來監聽發射狀態。

在初始化時（請參閱構造函數）：

一個初始化狀態須要設置;

  • 它建立了一個StreamSubscription聽傳入事件到
  • 將它們發送到eventHandler
  • 發出結果狀態。

3.2. 專門的BlocEventState

用於實現此類BlocEventState的模板在下面給出。以後，咱們將實施真實的。

class TemplateEventStateBloc extends BlocEventStateBase<BlocEvent, BlocState> {
  TemplateEventStateBloc()
      : super(
          initialState: BlocState.notInitialized(),
        );

  @override
  Stream<BlocState> eventHandler( BlocEvent event, BlocState currentState) async* {
     yield BlocState.notInitialized();
  }
}
複製代碼

若是這個模板不能編譯，請不要擔憂......這是正常的，由於咱們尚未定義BlocState.notInitialized（） ......這將在幾分鐘內出現。

此模板僅在初始化時提供initialState並覆蓋eventHandler。

這裏有一些很是有趣的事情須要注意。咱們使用異步生成器：async * 和yield語句。

使用async *修飾符標記函數，將函數標識爲異步生成器：

每次 yield 語句 被調用時，它增長了下面的表達式的結果 yield 輸出stream。

這是很是有用的，若是咱們須要發出一個序列的States，從一系列的行動所形成（咱們將在後面看到，在實踐中）

有關異步生成器的其餘詳細信息，請單擊此連接。

3.3.BlocEvent和BlocState

正如您所注意到的，咱們已經定義了一個 BlocEvent 和 BlocState 抽象類。

這些類須要使用您要發出的特殊事件和狀態進行擴展。

3.4. BlocEventStateBuilder小部件

模式最後一部分的是BlocEventStateBuilder小部件，它容許你在響應State(s)，所發射的BlocEventState。

這是它的源代碼：

typedef Widget AsyncBlocEventStateBuilder<BlocState>(BuildContext context, BlocState state);

class BlocEventStateBuilder<BlocEvent,BlocState> extends StatelessWidget {
  const BlocEventStateBuilder({
    Key key,
    @required this.builder,
    @required this.bloc,
  }): assert(builder != null),
      assert(bloc != null),
      super(key: key);

  final BlocEventStateBase<BlocEvent,BlocState> bloc;
  final AsyncBlocEventStateBuilder<BlocState> builder;

  @override
  Widget build(BuildContext context){
    return StreamBuilder<BlocState>(
      stream: bloc.state,
      initialData: bloc.initialState,
      builder: (BuildContext context, AsyncSnapshot<BlocState> snapshot){
        return builder(context, snapshot.data);
      },
    );
  }
}
複製代碼

這個Widget只是一個專門的StreamBuilder，它會在每次發出新的BlocState時調用builder輸入參數。

好的。如今咱們已經擁有了全部的部分，如今是時候展現咱們能夠用它們作些什麼......

3.5.案例1：應用程序初始化

第一個示例說明了您須要應用程序在啓動時執行某些任務的狀況。

常見的用途是遊戲最初顯示啓動畫面（動畫與否），同時從服務器獲取一些文件，檢查新的更新是否可用，嘗試鏈接到任何遊戲中心 ......在顯示實際主屏幕以前。爲了避免給應用程序什麼都不作的感受，它可能會顯示一個進度條並按期顯示一些圖片，同時它會完成全部初始化過程。

我要向您展現的實現很是簡單。它只會在屏幕上顯示一些競爭百分比，但這能夠很容易地擴展到您的需求。

3.5.1。ApplicationInitializationEvent

在這個例子中，我只考慮2個事件：

  • start：此事件將觸發初始化過程;
  • stop：該事件可用於強制初始化進程中止。

這是定義代碼實現：

class ApplicationInitializationEvent extends BlocEvent {
  
  final ApplicationInitializationEventType type;

  ApplicationInitializationEvent({
    this.type: ApplicationInitializationEventType.start,
  }) : assert(type != null);
}

enum ApplicationInitializationEventType {
  start,
  stop,
}
複製代碼

3.5.2. ApplicationInitializationState

該類將提供與初始化過程相關的信息。

對於這個例子，我會考慮：

  • 2標識： isInitialized指示初始化是否完成 isInitializing以瞭解咱們是否處於初始化過程的中間
  • 進度完成率

這是它的源代碼：

class ApplicationInitializationState extends BlocState {
  ApplicationInitializationState({
    @required this.isInitialized,
    this.isInitializing: false,
    this.progress: 0,
  });

  final bool isInitialized;
  final bool isInitializing;
  final int progress;

  factory ApplicationInitializationState.notInitialized() {
    return ApplicationInitializationState(
      isInitialized: false,
    );
  }

  factory ApplicationInitializationState.progressing(int progress) {
    return ApplicationInitializationState(
      isInitialized: progress == 100,
      isInitializing: true,
      progress: progress,
    );
  }

  factory ApplicationInitializationState.initialized() {
    return ApplicationInitializationState(
      isInitialized: true,
      progress: 100,
    );
  }
}
複製代碼

3.5.3. ApplicationInitializationBloc

該BLoC負責基於事件處理初始化過程。

這是代碼：

class ApplicationInitializationBloc extends BlocEventStateBase<ApplicationInitializationEvent, ApplicationInitializationState> {
  ApplicationInitializationBloc()
      : super(
          initialState: ApplicationInitializationState.notInitialized(),
        );

  @override
  Stream<ApplicationInitializationState> eventHandler(
      ApplicationInitializationEvent event, ApplicationInitializationState currentState) async* {
    
    if (!currentState.isInitialized){
      yield ApplicationInitializationState.notInitialized();
    }

    if (event.type == ApplicationInitializationEventType.start) {
      for (int progress = 0; progress < 101; progress += 10){
        await Future.delayed(const Duration(milliseconds: 300));
        yield ApplicationInitializationState.progressing(progress);
      }
    }

    if (event.type == ApplicationInitializationEventType.stop){
      yield ApplicationInitializationState.initialized();
    }
  }
}
複製代碼

一些解釋：

  • 當收到事件「 ApplicationInitializationEventType.start 」時，它從0開始計數到100(單位爲10），而且對於每一個值（0,10,20，......），它發出（經過yield）一個告訴的新狀態初始化正在運行（isInitializing = true）及其進度值。
  • 當收到事件"ApplicationInitializationEventType.stop"時，它認爲初始化已完成。
  • 正如你所看到的，我在計數器循環中放了一些延遲。這將向您展現如何使用任何Future（例如，您須要聯繫服務器的狀況）
3.5.4. 將它們所有包裝在一塊兒

如今，剩下的部分是顯示顯示計數器的僞Splash屏幕 ......

class InitializationPage extends StatefulWidget {
  @override
  _InitializationPageState createState() => _InitializationPageState();
}

class _InitializationPageState extends State<InitializationPage> {
  ApplicationInitializationBloc bloc;

  @override
  void initState(){
    super.initState();
    bloc = ApplicationInitializationBloc();
    bloc.emitEvent(ApplicationInitializationEvent());
  }

  @override
  void dispose(){
    bloc?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext pageContext) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          child: Center(
            child: BlocEventStateBuilder<ApplicationInitializationEvent, ApplicationInitializationState>(
              bloc: bloc,
              builder: (BuildContext context, ApplicationInitializationState state){
                if (state.isInitialized){
                  //
                  // Once the initialization is complete, let's move to another page
                  //
                  WidgetsBinding.instance.addPostFrameCallback((_){
                    Navigator.of(context).pushReplacementNamed('/home');
                  });
                }
                return Text('Initialization in progress... ${state.progress}%');
              },
            ),
          ),
        ),
      ),
    );
  }
}
複製代碼

說明：

  • 因爲ApplicationInitializationBloc不須要在應用程序的任何地方使用，咱們能夠在StatefulWidget中初始化它;
  • 咱們直接發出ApplicationInitializationEventType.start事件來觸發eventHandler
  • 每次發出ApplicationInitializationState時，咱們都會更新文本
  • 初始化完成後，咱們將用戶重定向到主頁。

特技

因爲咱們沒法直接重定向到主頁，在構建器內部，咱們使用WidgetsBinding.instance.addPostFrameCallback（）方法請求Flutter 在渲染完成後當即執行方法

3.6. 案例2：應用程序身份驗證和註銷

對於此示例，我將考慮如下用例：

  • 在啓動時，若是用戶未通過身份驗證，則會自動顯示「 身份驗證/註冊」頁面;
  • 在用戶認證期間，顯示CircularProgressIndicator ;
  • 通過身份驗證後，用戶將被重定向到主頁 ;
  • 在應用程序的任何地方，用戶均可以註銷;
  • 當用戶註銷時，用戶將自動重定向到「 身份驗證」頁面。

固然，頗有可能以編程方式處理全部這些，但將全部這些委託給BLoC要容易得多。

下圖解釋了我要解釋的解決方案：

image

名爲「 DecisionPage 」 的中間頁面將負責將用戶自動重定向到「 身份驗證」頁面或主頁，具體取決於用戶身份驗證的狀態。固然，此DecisionPage從不顯示，也不該被視爲頁面。

3.6.1. AuthenticationEvent

在這個例子中，我只考慮2個事件：

  • login：當用戶正確驗證時發出此事件;
  • logout：用戶註銷時發出的事件。

代碼以下：

abstract class AuthenticationEvent extends BlocEvent {
  final String name;

  AuthenticationEvent({
    this.name: '',
  });
}

class AuthenticationEventLogin extends AuthenticationEvent {
  AuthenticationEventLogin({
    String name,
  }) : super(
          name: name,
        );
}

class AuthenticationEventLogout extends AuthenticationEvent {}
複製代碼

3.6.2. AuthenticationState 該類將提供與身份驗證過程相關的信息。

對於這個例子，我會考慮：

  • 3點： isAuthenticated指示身份驗證是否完整 isAuthenticating以瞭解咱們是否處於身份驗證過程的中間 hasFailed表示身份驗證失敗
  • 通過身份驗證的用戶名

這是它的源代碼：

class AuthenticationState extends BlocState {
  AuthenticationState({
    @required this.isAuthenticated,
    this.isAuthenticating: false,
    this.hasFailed: false,
    this.name: '',
  });

  final bool isAuthenticated;
  final bool isAuthenticating;
  final bool hasFailed;

  final String name;
  
  factory AuthenticationState.notAuthenticated() {
    return AuthenticationState(
      isAuthenticated: false,
    );
  }

  factory AuthenticationState.authenticated(String name) {
    return AuthenticationState(
      isAuthenticated: true,
      name: name,
    );
  }

  factory AuthenticationState.authenticating() {
    return AuthenticationState(
      isAuthenticated: false,
      isAuthenticating: true,
    );
  }

  factory AuthenticationState.failure() {
    return AuthenticationState(
      isAuthenticated: false,
      hasFailed: true,
    );
  }
}
複製代碼
3.6.3.AuthenticationBloc

此BLoC負責根據事件處理身份驗證過程。

這是代碼：

class AuthenticationBloc extends BlocEventStateBase<AuthenticationEvent, AuthenticationState> {
  AuthenticationBloc()
      : super(
          initialState: AuthenticationState.notAuthenticated(),
        );

  @override
  Stream<AuthenticationState> eventHandler(
      AuthenticationEvent event, AuthenticationState currentState) async* {

    if (event is AuthenticationEventLogin) {
      //通知咱們正在進行身份驗證
      yield AuthenticationState.authenticating();

      //模擬對身份驗證服務器的調用
      await Future.delayed(const Duration(seconds: 2));

      //告知咱們是否已成功經過身份驗證
      if (event.name == "failure"){
        yield AuthenticationState.failure();
      } else {
        yield AuthenticationState.authenticated(event.name);
      }
    }

    if (event is AuthenticationEventLogout){
      yield AuthenticationState.notAuthenticated();
    }
  }
}
複製代碼

一些解釋：

  • 當收到事件「 AuthenticationEventLogin 」時，它會（經過yield）發出一個新狀態，告知身份驗證正在運行（isAuthenticating = true）。
  • 而後它運行身份驗證，一旦完成，就會發出另外一個狀態，告知身份驗證已完成。
  • 當收到事件「 AuthenticationEventLogout 」時，它將發出一個新狀態，告訴用戶再也不進行身份驗證。
3.6.4. AuthenticationPage

正如您將要看到的那樣，爲了便於解釋，此頁面很是基本且不會作太多。

這是代碼。解釋以下：

class AuthenticationPage extends StatelessWidget {
  ///
  /// Prevents the use of the "back" button
  ///
  Future<bool> _onWillPopScope() async {
    return false;
  }

  @override
  Widget build(BuildContext context) {
    AuthenticationBloc bloc = BlocProvider.of<AuthenticationBloc>(context);
    return WillPopScope(
      onWillPop: _onWillPopScope,
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Authentication Page'),
            leading: Container(),
          ),
          body: Container(
            child:
                BlocEventStateBuilder<AuthenticationEvent, AuthenticationState>(
              bloc: bloc,
              builder: (BuildContext context, AuthenticationState state) {
                if (state.isAuthenticating) {
                  return PendingAction();
                }

                if (state.isAuthenticated){
                  return Container();
                }
                
                List<Widget> children = <Widget>[];

                // Button to fake the authentication (success)
                children.add(
                  ListTile(
                      title: RaisedButton(
                        child: Text('Log in (success)'),
                        onPressed: () {
                            bloc.emitEvent(AuthenticationEventLogin(name: 'Didier'));
                        },
                      ),
                    ),
                );

                // Button to fake the authentication (failure)
                children.add(
                  ListTile(
                      title: RaisedButton(
                        child: Text('Log in (failure)'),
                        onPressed: () {
                            bloc.emitEvent(AuthenticationEventLogin(name: 'failure'));
                        },
                      ),
                    ),
                );

                // Display a text if the authentication failed
                if (state.hasFailed){
                  children.add(
                    Text('Authentication failure!'),
                  );
                }

                return Column(
                  children: children,
                );    
              },
            ),
          ),
        ),
      ),
    );
  }
}
複製代碼

說明：

  • 第11行：頁面檢索對AuthenticationBloc的引用
  • 第24-70行：它監聽發出的AuthenticationState： 若是身份驗證正在進行中，它會顯示一個CircularProgressIndicator，告訴用戶正在進行某些操做並阻止用戶訪問該頁面（第25-27行） 若是驗證成功，咱們不須要顯示任何內容（第29-31行）。 若是用戶未通過身份驗證，則會顯示2個按鈕以模擬成功的身份驗證和失敗。 當咱們點擊其中一個按鈕時，咱們發出一個AuthenticationEventLogin事件，以及一些參數（一般由認證過程使用） 若是驗證失敗，咱們會顯示錯誤消息（第60-64行）

提示

您可能已經注意到，我將頁面包裝在WillPopScope中。 理由是我不但願用戶可以使用Android'後退'按鈕，如此示例中所示，身份驗證是一個必須的步驟，它阻止用戶訪問任何其餘部分，除非通過正確的身份驗證。

3.6.5. DecisionPage

如前所述，我但願應用程序根據身份驗證狀態自動重定向到AuthenticationPage或HomePage。

如下是此DecisionPage的代碼，說明以下：

class DecisionPage extends StatefulWidget {
  @override
  DecisionPageState createState() {
    return new DecisionPageState();
  }
}

class DecisionPageState extends State<DecisionPage> {
  AuthenticationState oldAuthenticationState;

  @override
  Widget build(BuildContext context) {
    AuthenticationBloc bloc = BlocProvider.of<AuthenticationBloc>(context);
    return BlocEventStateBuilder<AuthenticationEvent, AuthenticationState>(
      bloc: bloc,
      builder: (BuildContext context, AuthenticationState state) {
        if (state != oldAuthenticationState){
          oldAuthenticationState = state;

          if (state.isAuthenticated){
            _redirectToPage(context, HomePage());
          } else if (state.isAuthenticating || state.hasFailed){
           //do nothing
          } else {
            _redirectToPage(context, AuthenticationPage());
          }
        }//此頁面不須要顯示任何內容
        //老是在任何活動頁面後面提醒（所以「隱藏」）。
        return Container();
      }
    );
  }

  void _redirectToPage(BuildContext context, Widget page){
    WidgetsBinding.instance.addPostFrameCallback((_){
      MaterialPageRoute newRoute = MaterialPageRoute(
          builder: (BuildContext context) => page
        );

      Navigator.of(context).pushAndRemoveUntil(newRoute, ModalRoute.withName('/decision'));
    });
  }
}
複製代碼

提醒

爲了詳細解釋這一點，咱們須要回到Flutter處理Pages（= Route）的方式。要處理路由，咱們使用導航器，它建立一個疊加層。 這個覆蓋是一個堆棧的OverlayEntry，他們每一個人的包含頁面。 當咱們經過Navigator.of（上下文）推送，彈出，替換頁面時，後者更新其重建的覆蓋（所以堆棧）。 當堆棧被重建，每一個OverlayEntry（所以它的內容）也被重建。 所以，當咱們經過Navigator.of（上下文）進行操做時，全部剩餘的頁面都會重建！

那麼，爲何我將它實現爲StatefulWidget？

爲了可以響應AuthenticationState的任何更改，此「 頁面 」須要在應用程序的整個生命週期中保持存在。

這意味着，根據上面的提醒，每次Navigator.of（上下文）完成操做時，都會重建此頁面。

所以，它的BlocEventStateBuilder也將重建，調用本身的構建器方法。

由於此構建器負責將用戶重定向到與AuthenticationState對應的頁面，因此若是咱們每次重建頁面時重定向用戶，它將繼續重定向，由於不斷重建。

爲了防止這種狀況發生，咱們只須要記住咱們採起行動的最後一個AuthenticationState，而且只在收到另外一個AuthenticationState時採起另外一個動做。

這是如何運做的？

如上所述，每次發出AuthenticationState時，BlocEventStateBuilder都會調用其構建器。

基於狀態標誌（isAuthenticated），咱們知道咱們須要向哪一個頁面重定向用戶。

特技

因爲咱們沒法直接從構建器重定向到另外一個頁面，所以咱們使用WidgetsBinding.instance.addPostFrameCallback（）方法在呈現完成後請求Flutter執行方法

此外，因爲咱們須要在重定向用戶以前刪除任何現有頁面，除了須要保留在全部狀況下的此DecisionPage 以外，咱們使用Navigator.of（context）.pushAndRemoveUntil（...）來實現此目的。

3.6.六、登出 要讓用戶註銷，您如今能夠建立一個「 LogOutButton 」並將其放在應用程序的任何位置。

  • 此按鈕只須要發出AuthenticationEventLogout（）事件，這將致使如下自動操做鏈： 1.它將由AuthenticationBloc處理 2.反過來會發出一個AuthentiationState（isAuthenticated = false） 3.這將由DecisionPage經過BlocEventStateBuilder處理 4.這會將用戶重定向到AuthenticationPage
3.6.7. AuthenticationBloc

因爲AuthenticationBloc須要提供給該應用程序的任何頁面，咱們也將注入它做爲MaterialApp父母，以下所示

void main() => runApp(Application());

class Application extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<AuthenticationBloc>(
      bloc: AuthenticationBloc(),
      child: MaterialApp(
        title: 'BLoC Samples',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: DecisionPage(),
      ),
    );
  }
}
複製代碼

4.表格驗證（容許根據條目和驗證控制表單的行爲）

BLoC的另外一個有趣用途是當您須要驗證表單時：

  • 根據某些業務規則驗證與TextField相關的條目;
  • 根據規則顯示驗證錯誤消息;
  • 根據業務規則自動化窗口小部件的可訪問性。

我如今要作的一個例子是RegistrationForm，它由3個TextFields（電子郵件，密碼，確認密碼）和1個RaisedButton組成，以啓動註冊過程。

我想要實現的業務規則是：

  • 該電子郵件必須是一個有效的電子郵件地址。若是不是，則須要顯示消息。
  • 該密碼必須是有效的（必須包含至少8個字符，具備1個大寫，小寫1，圖1和1個特殊字符）。若是無效，則須要顯示消息。
  • 在從新輸入密碼須要知足相同的驗證規則和相同的密碼。若是不相同，則須要顯示消息。
  • 在登記時，按鈕可能只能激活全部的規則都是有效的。

4.1.RegistrationFormBloc

該BLoC負責處理驗證業務規則，如前所述。

源碼以下：

class RegistrationFormBloc extends Object with EmailValidator, PasswordValidator implements BlocBase {

  final BehaviorSubject<String> _emailController = BehaviorSubject<String>();
  final BehaviorSubject<String> _passwordController = BehaviorSubject<String>();
  final BehaviorSubject<String> _passwordConfirmController = BehaviorSubject<String>();

  //
  // Inputs
  //
  Function(String) get onEmailChanged => _emailController.sink.add;
  Function(String) get onPasswordChanged => _passwordController.sink.add;
  Function(String) get onRetypePasswordChanged => _passwordConfirmController.sink.add;

  //
  // Validators
  //
  Stream<String> get email => _emailController.stream.transform(validateEmail);
  Stream<String> get password => _passwordController.stream.transform(validatePassword);
  Stream<String> get confirmPassword => _passwordConfirmController.stream.transform(validatePassword)
    .doOnData((String c){
      // If the password is accepted (after validation of the rules)
      // we need to ensure both password and retyped password match
      if (0 != _passwordController.value.compareTo(c)){
        // If they do not match, add an error
        _passwordConfirmController.addError("No Match");
      }
    });

  //
  // Registration button
  Stream<bool> get registerValid => Observable.combineLatest3(
                                      email, 
                                      password, 
                                      confirmPassword, 
                                      (e, p, c) => true
                                    );

  @override
  void dispose() {
    _emailController?.close();
    _passwordController?.close();
    _passwordConfirmController?.close();
  }
}

複製代碼

讓我詳細解釋一下......

  • 咱們首先初始化3個BehaviorSubject來處理表單的每一個TextField的Streams。
  • 咱們公開了3個Function（String），它將用於接受來自TextFields的輸入。
  • 咱們公開了3個Stream ，TextField將使用它來顯示由它們各自的驗證產生的潛在錯誤消息
  • 咱們公開了1個Stream ，它將被RaisedButton使用，以根據整個驗證結果啓用/禁用它。

好的，如今是時候深刻了解更多細節......

您可能已經注意到，此類的簽名有點特殊。咱們來回顧一下吧。

class RegistrationFormBloc extends Object with EmailValidator, PasswordValidator implements BlocBase {
  ...
}
複製代碼

with 關鍵字意味着這個類是使用混入(MIXINS)(在另外一個類中重用一些類代碼的一種方法)，爲了可以使用with關鍵字，該類須要擴展Object類。這些mixin包含分別驗證電子郵件和密碼的代碼。

有關詳細信息，混入我建議你閱讀從這篇大文章 Romain Rastel。

4.1.1. Validator Mixins

我只會解釋EmailValidator，由於PasswordValidator很是類似。

First, the code:

const String _kEmailRule = r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$";

class EmailValidator {
  final StreamTransformer<String,String> validateEmail = 
      StreamTransformer<String,String>.fromHandlers(handleData: (email, sink){
        final RegExp emailExp = new RegExp(_kEmailRule);

        if (!emailExp.hasMatch(email) || email.isEmpty){
          sink.addError('Entre a valid email');
        } else {
          sink.add(email);
        }
      });
}
複製代碼

該類公開了一個 final 函數（「 validateEmail 」），它是一個StreamTransformer。

提醒 StreamTransformer被調用以下：stream.transform（StreamTransformer）。 StreamTransformer經過transform方法從Stream引用它的輸入。而後它處理此輸入，並將轉換後的輸入從新注入初始Stream。

4.1.2. 爲何使用stream.transform（）？

如前所述，若是驗證成功，StreamTransformer會將輸入從新注入Stream。爲何有用？

如下是與Observable.combineLatest3（）相關的解釋...此方法在它引用的全部Streams以前不會發出任何值，至少發出一個值。

讓咱們看看下面的圖片來講明咱們想要實現的目標。

image.png

若是用戶輸入電子郵件而且後者通過驗證，它將由電子郵件流發出，該電子郵件流將是Observable.combineLatest3（）的一個輸入; 若是電子郵件地址無效，錯誤將被添加到流（和沒有價值會流出流）; 這一樣適用於密碼和從新輸入密碼 ; 當全部這三個驗證都成功時（意味着全部這三個流都會發出一個值），Observable.combineLatest3（）將依次發出一個真正的感謝「 （e，p，c）=> true 」（見第35行）。

4.1.3. 驗證2個密碼

我在互聯網上看到了不少與這種比較有關的問題。存在幾種解決方案，讓我解釋其中的兩種。

4.1.3.1.基本解決方案 - 沒有錯誤消息

第一個解決方案多是如下一個：

Stream<bool> get registerValid => Observable.combineLatest3(
                                      email, 
                                      password, 
                                      confirmPassword, 
                                      (e, p, c) => (0 == p.compareTo(c))
                                    );
複製代碼

這個解決方案只需驗證兩個密碼，若是它們匹配，就會發出一個值（= true）。

咱們很快就會看到，Register按鈕的可訪問性將取決於registerValid流。

若是兩個密碼不匹配，則該流不會發出任何值，而且「 註冊」按鈕保持不活動狀態，但用戶不會收到任何錯誤消息以幫助他理解緣由。

4.1.3.2。帶錯誤消息的解決方案

另外一種解決方案包括擴展confirmPassword流的處理，以下所示：

Stream<String> get confirmPassword => _passwordConfirmController.stream.transform(validatePassword)
    .doOnData((String c){
      //若是接受密碼（在驗證規則後）
      //咱們須要確保密碼和從新輸入的密碼匹配
      if (0 != _passwordController.value.compareTo(c)){
         //若是它們不匹配，請添加錯誤
        _passwordConfirmController.addError("No Match");
      }
    });
複製代碼

一旦驗證了從新輸入密碼，它就會被Stream發出，而且使用doOnData，咱們能夠直接獲取此發出的值並將其與密碼流的值進行比較。若是二者不匹配，咱們如今能夠發送錯誤消息。

4.2. The RegistrationForm

如今讓咱們先解釋一下RegistrationForm：

class RegistrationForm extends StatefulWidget {
  @override
  _RegistrationFormState createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<RegistrationForm> {
  RegistrationFormBloc _registrationFormBloc;

  @override
  void initState() {
    super.initState();
    _registrationFormBloc = RegistrationFormBloc();
  }

  @override
  void dispose() {
    _registrationFormBloc?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
        children: <Widget>[
          StreamBuilder<String>(
              stream: _registrationFormBloc.email,
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                return TextField(
                  decoration: InputDecoration(
                    labelText: 'email',
                    errorText: snapshot.error,
                  ),
                  onChanged: _registrationFormBloc.onEmailChanged,
                  keyboardType: TextInputType.emailAddress,
                );
              }),
          StreamBuilder<String>(
              stream: _registrationFormBloc.password,
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                return TextField(
                  decoration: InputDecoration(
                    labelText: 'password',
                    errorText: snapshot.error,
                  ),
                  obscureText: false,
                  onChanged: _registrationFormBloc.onPasswordChanged,
                );
              }),
          StreamBuilder<String>(
              stream: _registrationFormBloc.confirmPassword,
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                return TextField(
                  decoration: InputDecoration(
                    labelText: 'retype password',
                    errorText: snapshot.error,
                  ),
                  obscureText: false,
                  onChanged: _registrationFormBloc.onRetypePasswordChanged,
                );
              }),
          StreamBuilder<bool>(
              stream: _registrationFormBloc.registerValid,
              builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
                return RaisedButton(
                  child: Text('Register'),
                  onPressed: (snapshot.hasData && snapshot.data == true)
                      ? () {
                          // launch the registration process
                        }
                      : null,
                );
              }),
        ],
      ),
    );
  }
}
複製代碼

說明：

  • 因爲RegisterFormBloc僅供此表單使用，所以適合在此處初始化它。
  • 每一個TextField都包裝在StreamBuilder 中，以便可以響應驗證過程的任何結果（請參閱errorText：snapshot.error）
  • 每次對TextField的內容進行修改時，咱們都會經過onChanged發送輸入到BLoC進行驗證：_registrationFormBloc.onEmailChanged（電子郵件輸入的狀況）
  • 對於RegisterButton，後者也包含在StreamBuilder 中。
  • 若是_registrationFormBloc.registerValid發出一個值，onPressed方法將執行某些操做
  • 若是未發出任何值，則onPressed方法將被指定爲null，這將取消激活該按鈕。

而已！表單中沒有任何業務規則，這意味着能夠更改規則而無需對錶單進行任何修改，這很是好！

5.Part Of（容許Widget根據其在列表中的存在來調整其行爲）

有時，Widget知道它是不是驅動其行爲的集合的一部分是有趣的。

對於本文的最後一個用例，我將考慮如下場景：

應用程序處理項目; 用戶能夠選擇放入購物籃的物品; 一件商品只能放入購物籃一次; 存放在購物籃中的物品能夠從購物籃中取出; 一旦被移除，就能夠將其取回。

對於此示例，每一個項目將顯示一個按鈕，該按鈕將取決於購物籃中物品的存在。若是不是購物籃的一部分，該按鈕將容許用戶將其添加到購物籃中。若是是購物籃的一部分，該按鈕將容許用戶將其從籃子中取出。

爲了更好地說明「 部分 」模式，我將考慮如下架構：

一個購物頁面將顯示全部可能的項目清單; 購物頁面中的每一個商品都會顯示一個按鈕，用於將商品添加到購物籃或將其移除，具體取決於其在購物籃中的位置; 若是一個項目在購物頁被添加到籃，它的按鈕將自動更新，以容許用戶從所述籃（反之亦然）將其刪除，而沒必要從新生成購物頁 另外一頁，購物籃，將列出籃子裏的全部物品; 能夠今後頁面中刪除購物籃中的任何商品。

邊注 Part Of這個名字是我給的我的名字。這不是官方名稱。

正如您如今能夠想象的那樣，咱們須要考慮一個專門用於處理全部可能項目列表的BLoC，以及購物籃的一部分。

這個BLoC可能以下所示：

class ShoppingBloc implements BlocBase {
  // 全部商品的清單，購物籃的一部分
  Set<ShoppingItem> _shoppingBasket = Set<ShoppingItem>();

  // 流到全部可能項目的列表
  BehaviorSubject<List<ShoppingItem>> _itemsController = BehaviorSubject<List<ShoppingItem>>();
  Stream<List<ShoppingItem>> get items => _itemsController;

  // Stream以列出購物籃中的項目部分
  BehaviorSubject<List<ShoppingItem>> _shoppingBasketController = BehaviorSubject<List<ShoppingItem>>(seedValue: <ShoppingItem>[]);
  Stream<List<ShoppingItem>> get shoppingBasket => _shoppingBasketController;

  @override
  void dispose() {
    _itemsController?.close();
    _shoppingBasketController?.close();
  }

  //構造函數
  ShoppingBloc() {
    _loadShoppingItems();
  }

  void addToShoppingBasket(ShoppingItem item){
    _shoppingBasket.add(item);
    _postActionOnBasket();
  }

  void removeFromShoppingBasket(ShoppingItem item){
    _shoppingBasket.remove(item);
    _postActionOnBasket();
  }

  void _postActionOnBasket(){
    // 使用新內容提供購物籃流
    _shoppingBasketController.sink.add(_shoppingBasket.toList());
    
    // 任何其餘處理，如
    // 計算籃子的總價
    // 項目數量，籃子的一部分......
  }

  //
  //生成一系列購物項目
  //一般這應該來自對服務器的調用
  //可是對於這個樣本，咱們只是模擬
  //
  void _loadShoppingItems() {
    _itemsController.sink.add(List<ShoppingItem>.generate(50, (int index) {
      return ShoppingItem(
        id: index,
        title: "Item $index",
        price: ((Random().nextDouble() * 40.0 + 10.0) * 100.0).roundToDouble() /
            100.0,
        color: Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0)
            .withOpacity(1.0),
      );
    }));
  }
}
複製代碼

惟一可能須要解釋的方法是_postActionOnBasket（）方法。每次在籃子中添加或刪除項目時，咱們都須要「刷新」 _shoppingBasketController Stream 的內容，以便通知全部正在監聽此Stream更改的Widgets並可以刷新/重建。

5.2. ShoppingPage

此頁面很是簡單，只顯示全部項目。

class ShoppingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ShoppingBloc bloc = BlocProvider.of<ShoppingBloc>(context);

    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        title: Text('Shopping Page'),
        actions: <Widget>[
          ShoppingBasket(),
        ],
      ),
      body: Container(
        child: StreamBuilder<List<ShoppingItem>>(
          stream: bloc.items,
          builder: (BuildContext context,
              AsyncSnapshot<List<ShoppingItem>> snapshot) {
            if (!snapshot.hasData) {
              return Container();
            }
            return GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 1.0,
              ),
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return ShoppingItemWidget(
                  shoppingItem: snapshot.data[index],
                );
              },
            );
          },
        ),
      ),
    ));
  }
}
複製代碼

說明：

  • 所述AppBar顯示按鈕，： 顯示出如今購物籃中的商品數量 單擊時將用戶重定向到ShoppingBasket頁面
  • 項目列表使用GridView構建，包含在StreamBuilder <List >中
  • 每一個項目對應一個ShoppingItemWidget

5.3.ShoppingBasketPage

此頁面與ShoppingPage很是類似，只是StreamBuilder如今正在偵聽由ShoppingBloc公開的_shoppingBasket流的變體。

5.4. ShoppingItemWidget和ShoppingItemBloc

Part Of 模式依賴於這兩個元素的組合

  • 該ShoppingItemWidget負責： 顯示項目和 用於在購物籃中添加項目或從中取出項目的按鈕
  • 該ShoppingItemBloc負責告訴ShoppingItemWidget後者是不是購物籃的一部分，或者不是。 讓咱們看看他們如何一塊兒工做......
5.4.1. ShoppingItemBloc

ShoppingItemBloc由每一個ShoppingItemWidget實例化，賦予它「身份」

此BLoC偵聽ShoppingBasket流的全部變體，並檢查特定項目標識是不是籃子的一部分。

若是是，它會發出一個布爾值（= true），它將被ShoppingItemWidget捕獲，以肯定它是不是籃子的一部分。

這是BLoC的代碼：

class ShoppingItemBloc implements BlocBase {
   // Stream，若是ShoppingItemWidget是購物籃的一部分，則通知
  BehaviorSubject<bool> _isInShoppingBasketController = BehaviorSubject<bool>();
  Stream<bool> get isInShoppingBasket => _isInShoppingBasketController;

  //收到全部商品列表的流，購物籃的一部分
  PublishSubject<List<ShoppingItem>> _shoppingBasketController = PublishSubject<List<ShoppingItem>>();
  Function(List<ShoppingItem>) get shoppingBasket => _shoppingBasketController.sink.add;

   //具備shoppingItem的「標識」的構造方法
  ShoppingItemBloc(ShoppingItem shoppingItem){
    //每次購物籃內容的變化
    _shoppingBasketController.stream
                           //咱們檢查這個shoppingItem是不是購物籃的一部分
                         .map((list) => list.any((ShoppingItem item) => item.id == shoppingItem.id))
                          // if it is part
                         .listen((isInShoppingBasket)
                              // we notify the ShoppingItemWidget 
                            => _isInShoppingBasketController.add(isInShoppingBasket));
  }

  @override
  void dispose() {
    _isInShoppingBasketController?.close();
    _shoppingBasketController?.close();
  }
}
複製代碼
5.4.2。ShoppingItemWidget

此Widget負責：

  • 建立ShoppingItemBloc的實例並將其本身的標識傳遞給BLoC
  • 監聽ShoppingBasket內容的任何變化並將其轉移到BLoC
  • 監聽ShoppingItemBloc知道它是不是籃子的一部分
  • 顯示相應的按鈕（添加/刪除），具體取決於它在籃子中的存在
  • 響應按鈕的用戶操做 當用戶點擊添加按鈕時，將本身添加到購物籃中 當用戶點擊刪除按鈕時，將本身從籃子中移除。

讓咱們看看它是如何工做的（解釋在代碼中給出）。

class ShoppingItemWidget extends StatefulWidget {
  ShoppingItemWidget({
    Key key,
    @required this.shoppingItem,
  }) : super(key: key);

  final ShoppingItem shoppingItem;

  @override
  _ShoppingItemWidgetState createState() => _ShoppingItemWidgetState();
}

class _ShoppingItemWidgetState extends State<ShoppingItemWidget> {
  StreamSubscription _subscription;
  ShoppingItemBloc _bloc;
  ShoppingBloc _shoppingBloc;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    //因爲不該在「initState（）」方法中使用上下文，
    //在須要時更喜歡使用「didChangeDependencies（）」
    //在初始化時引用上下文
    _initBloc();
  }

  @override
  void didUpdateWidget(ShoppingItemWidget oldWidget) {
    super.didUpdateWidget(oldWidget);

    //由於Flutter可能決定從新組織Widgets樹
    //最好從新建立連接
    _disposeBloc();
    _initBloc();
  }

  @override
  void dispose() {
    _disposeBloc();
    super.dispose();
  }

   //這個例程對於建立連接是可靠的
  void _initBloc() {
    //建立ShoppingItemBloc的實例
    _bloc = ShoppingItemBloc(widget.shoppingItem);

    //檢索處理購物籃內容的BLoC 
    _shoppingBloc = BlocProvider.of<ShoppingBloc>(context);

     //傳輸購物內容的簡單管道
    //購物籃子到ShoppingItemBloc
    _subscription = _shoppingBloc.shoppingBasket.listen(_bloc.shoppingBasket);
  }

  void _disposeBloc() {
    _subscription?.cancel();
    _bloc?.dispose();
  }

  Widget _buildButton() {
    return StreamBuilder<bool>(
      stream: _bloc.isInShoppingBasket,
      initialData: false,
      builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        return snapshot.data
            ? _buildRemoveFromShoppingBasket()
            : _buildAddToShoppingBasket();
      },
    );
  }

  Widget _buildAddToShoppingBasket(){
    return RaisedButton(
      child: Text('Add...'),
      onPressed: (){
        _shoppingBloc.addToShoppingBasket(widget.shoppingItem);
      },
    );
  }

  Widget _buildRemoveFromShoppingBasket(){
    return RaisedButton(
      child: Text('Remove...'),
      onPressed: (){
        _shoppingBloc.removeFromShoppingBasket(widget.shoppingItem);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: GridTile(
        header: Center(
          child: Text(widget.shoppingItem.title),
        ),
        footer: Center(
          child: Text('${widget.shoppingItem.price} €'),
        ),
        child: Container(
          color: widget.shoppingItem.color,
          child: Center(
            child: _buildButton(),
          ),
        ),
      ),
    );
  }
}
複製代碼

5.5. 這一切如何運做？

下圖顯示了全部部分如何協同工做。

image.png

結論

另外一篇長篇文章，我但願我能縮短一點，但我認爲值得一些解釋。

正如我在介紹中所說，我我的在個人開發中常用這些「 模式 」。這讓我節省了大量的時間和精力; 個人代碼更易讀，更容易調試。

此外，它有助於將業務與視圖分離。

大多數確定有其餘方法能夠作到這一點，甚至更好的方式，但它只對我有用，這就是我想與你分享的一切。

請繼續關注新文章，同時祝您編程愉快。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程