Flutter 使用 Bloc

初学flutter，我们知道flutter有state状态的概念。当数据有变动时，通过调用setState方法进行状态变更，UI重新绘制。

今天，我们来说说flutter里用于管理状态的利器Bloc。Bloc的核心思想是对Stream流的使用，整体使用MVVM的交互模式。

安装

dependencies:
  flutter_bloc: ^7.0.0
  //^6.0.1非空安全

使用方式

1. 新建 test_bloc.dart 文件，定义bloc类，state类，event类：

• bloc提供给widget用于监听内容（state）变动，widget也通过bloc发送事件（event），更新内容（state）

import 'package:flutter_bloc/flutter_bloc.dart';

class TestBloc extends Bloc<TestEvent, TestState> {

  TestState _curretnState;
  TestBloc(TestState initialState) : super(initialState){
    _curretnState = initialState;
  }

  @override
  Stream<TestState> mapEventToState(TestEvent event) async* {
    if(event is InCreaseEvent){
      ///对当前状态count属性进行+1操作
      _curretnState.count++;
      ///yield 往流注入更新内容
      yield _curretnState.copy();
    }
  }
}

///bloc状态
class TestState {
  int count;
  TestState(this.count);

  TestState copy() {
    return TestState(this.count);
  }
}

///bloc事件，抽象，用于扩展
abstract class TestEvent {}
///具体事件，加法
class InCreaseEvent extends TestEvent{}

2. widget中这样监听bloc的状态变更，以及发送事件修改状态

class _TestBlocPageState extends State<TestBlocPage> {
  TestBloc _bloc;

  @override
  void initState() {
    _bloc = TestBloc(TestState(1));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<TestBloc, TestState>(
      cubit: _bloc,
      builder: (context, state) {
        return Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                  onPressed: () {
                    ///发送加法事件
                    _bloc.add(InCreaseEvent());
                  },
                  child: Text('加1操作')),
              Text('${state.count}')
            ],
          ),
        );
      },
    );
  }
}