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'); 
  }
}