Flutter应用程序增加BLoC模式

本文讲述如何把一个Flutter基础应用程序转换使用BLoC模式。

为什么要使用BLoC模式？

BLoC(Business Logic Component)模式是通过把业务逻辑从视图里分离出来的一种响应式框架。
最基本的思想是在UI层和数据层通过streams做为输出，sinks做为输入来做数据访问。

image.png

制作一个计数程序

新建一个项目名为 counter_app

flutter create counter_app

自动生成的代码在main.dart里注意几点：

• _counter变量存储计数器的值。
• _incrementCounter函数增加_counter值。
• 浮动按钮执行_incrementCounter函数。
  当按钮触发_counter发生改变时调用setState()函数进行组件刷新。
  这段代码简单有效，但是如果想在不同页里里共享_counter值呢？显然不起作用，因为该变量只供本wdiget使用。
  BLoC模式即可在程序任何页面和组件对其进行更新调用。

计数器的BLoC应用

配置文件增加三方库rxdart

image.png

首先，创建一个数据来源的新文件counter_bloc.dart，在私有变量中使用streams和sinks进行数据交互。
如果你熟悉响应式编程和Rx，streams类似Observables，sinks是Subjects，因此使用streams侦听数据变化，sinks更新数据。

import 'dart:async';

import 'package:rxdart/rxdart.dart';
import 'package:rxdart/subjects.dart';

class CounterBloc {
  int _counter = 0;

  final _counter$ = BehaviorSubject<int>.seeded(0);
  final _incrementController = StreamController<void>();

  CounterBloc() {
    _incrementController.stream.listen((void _) => _counter$.add(++_counter));
  }

  Sink<void> get increment => _incrementController.sink;

  Stream<int> get counter$ => _counter$.stream;

  void dispose() {
    _incrementController.close();
    _counter$.close();
  }
}

在上面代码中，使用了两个getters，counter$公开对私有变量_counter进行变更，increment增加变量值。
注意程序如何将输入sink和输出stream在构造函数中关联起来，每次执行increment，都会有一个新的值赋于counter。
现在需要从widget访问CounterBloc类，为实现访问需要InheritedWidget。这是一个特殊类型的widget，它位于widget顶部，允许向下传递信息。这样如果内容发生改变其他widget将会重新渲染。
创建文件bloc_provider.dart，内容如下:

import 'package:counter_app/counter_bloc.dart';
import 'package:flutter/material.dart';


class BlocProvider extends InheritedWidget {
  final CounterBloc bloc;

  BlocProvider({Key key, this.bloc, child}) : super(key: key, child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => true;

  static CounterBloc of(BuildContext context) =>
      (context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider).bloc;
}

在完成上述功能后，接下来简化main widget。程序使用基于bloc的BlocProvider管理状态而非StatefulWidget，main.dart内容变更如下：

import 'package:counter_app/bloc_provider.dart';
import 'package:counter_app/counter_bloc.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final bloc = CounterBloc();
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: 
      BlocProvider(
         bloc: bloc,
        child:MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({this.title});
  final String title;
  @override
  Widget build(BuildContext context) {
    final bloc = BlocProvider.of(context);
   return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            StreamBuilder(
              stream: bloc.counter$,
              builder: (context, snapshot)=>snapshot.hasData?
              Text(
              '${snapshot.data}',
              style: Theme.of(context).textTheme.display1,
            ): CircularProgressIndicator(),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()=>bloc.increment.add(null),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

在主函数中，使用BlockProvider包含整个应用，因此可以访问所有widget。
通过BlocProvider.of(context)访问计数bloc，然后通过streams和sinks进行数据交互。
程序通过增加sink生成一个新事件，counter$ stream触发StreamBuilder重新渲染counter值。