flutter总结 - 状态管理flutter_bloc

1、安装

dependencies:
  flutter_bloc: ^4.0.0

2、定义Event事件

enum CounterEvent { increment, decrement }

3、定义Bloc处理事件

import 'package:flutter_bloc/flutter_bloc.dart';

import 'CounterEvent.dart';

class CounterBloc extends Bloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.decrement:
        yield state - 1;
        break;
      case CounterEvent.increment:
        yield state + 1;
        break;
    }
  }
}

4、注册BlocProvider

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutterapp2/bloc2/CounterPage.dart';

import 'bloc2/CounterBloc.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: BlocProvider<CounterBloc>(
        create: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

5、使用 BlocBuilder

获取对象

final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);

使用

BlocBuilder<CounterBloc, int>(
        builder: (context, count) {
          return Center(
            child: Text(
              '$count',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        },
      )

发送事件

counterBloc.add(CounterEvent.increment);

示例：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutterapp2/bloc2/CounterBloc.dart';

import 'CounterEvent.dart';

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: BlocBuilder<CounterBloc, int>(
        builder: (context, count) {
          return Center(
            child: Text(
              '$count',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                counterBloc.add(CounterEvent.increment);
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () {
                counterBloc.add(CounterEvent.decrement);
              },
            ),
          ),
        ],
      ),
    );
  }
}

6、和setState相比优点

flutter 原生的setState，是整个widget刷新。而且必须在StateFullWidget上使用。UI 逻辑和业务逻辑没有分离 且只能管理本地状态。适合比较简单的页面。
bloc哪里需要使用，哪里添加。效率会更好。相当于mvvm ，既能管理本地状态也能管理全局状态，可以从上往下，也可以从下往上传，维护方便，数据于UI隔离

7、参考：

官网
文档
示例