[译]Flutter 响应式编程：Steams 和 BLoC 实

原文：Reactive Programming - Streams - BLoC - Practical Use Cases 是作者 Didier Boelens 为 Reactive Programming - Streams - BLoC 写的后续

阅读本文前建议先阅读前篇，前篇中文翻译有两个版本：

1. [译]Flutter响应式编程：Streams和BLoC by JarvanMo
   忠于原作的版本

2. Flutter中如何利用StreamBuilder和BLoC来控制Widget状态 by 吉原拉面
   省略了一些初级概念，补充了一些个人解读

前言

在了解 BLoC, Reactive Programming 和 Streams 概念后，我又花了些时间继续研究，现在非常高兴能够与你们分享一些我经常使用并且个人觉得很有用的模式(至少我是这么认为的)。这些模式为我节约了大量的开发时间，并且让代码更加易读和调试。

目录

(由于原文较长，翻译发布时进行了分割)

1. BlocProvider 性能优化
   结合 StatefulWidget 和 InheritedWidget 两者优势构建 BlocProvider

2. BLoC 的范围和初始化
   根据 BLoC 的使用范围初始化 BLoC

3. 事件与状态管理
   基于事件(Event) 的状态 (State) 变更响应

4. 表单验证
   根据表单项验证来控制表单行为 (范例中包含了表单中常用的密码和重复密码比对)

5. Part Of 模式
   允许组件根据所处环境(是否在某个列表/集合/组件中)调整自身的行为

文中涉及的完整代码可在 GitHub 查看。

5. Part Of 模式

有时候，需要组件根据所处环境(是否是属于某个列表/集合/组件等)来驱动自身的行为，作为本文的最后一个范例，我们将考虑如下场景：

• App 提供与显示多个商品(item)
• 用户可以将选择的商品放入购物篮
• 每件商品仅能放入购物篮一次
• 购物篮中的商品可以被移除
• 被移除的商品可以重新被用户放入购物篮

在例子中，每个商品都会显示一个按钮，这个按钮根据商品是否是在购物篮中决定其行为：

• 如果是在购物篮中，则允许用户点击后将商品从购物篮中移除
• 如果没在购物篮中，则用户点击后对应商品将添加到购物篮中

为了更好地说明 Part of 模式，我采用了以下的代码架构：

• 实现一个 Shopping Page，用来显示所有可能的商品列表
• Shopping Page 中的每个商品都会有个按钮，这个按钮可将商品添加到购物篮中或从购物篮中移除，取决于商品是否已经在购物篮中
• 如果 Shopping Page 中的一件商品被添加到购物篮中，那么按钮将自动更新，允许用户再次点击后将商品从购物篮中移除(反过来也一样)；这个过程不需要重构 Shopping Page
• 构建另一个页面 Shopping Basket，用来显示全部已经添加到购物篮的商品
• 可从 Shopping Basket 页面中移除任何已添加到购物篮的商品

注意

「Part Of 模式」 这个名字是我自己取的，并不是官方名称。

5.1. ShoppingBloc

你可能已经想到了，我们需要考虑让 BLoC 来处理所有商品的列表，以及 Shopping Basket 页面中的(已添加到购物篮中的)商品列表

这个 BLoC 代码如下：

bloc_shopping_bloc.dart

class ShoppingBloc implements BlocBase {
  // List of all items, part of the shopping basket
  Set<ShoppingItem> _shoppingBasket = Set<ShoppingItem>();


  // Stream to list of all possible items
  BehaviorSubject<List<ShoppingItem>> _itemsController = BehaviorSubject<List<ShoppingItem>>();
  Stream<List<ShoppingItem>> get items => _itemsController;


  // Stream to list the items part of the shopping basket
  BehaviorSubject<List<ShoppingItem>> _shoppingBasketController = BehaviorSubject<List<ShoppingItem>>(seedValue: <ShoppingItem>[]);
  Stream<List<ShoppingItem>> get shoppingBasket => _shoppingBasketController;


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


  // Constructor
  ShoppingBloc() {
    _loadShoppingItems();
  }


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


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


  void _postActionOnBasket(){
    // Feed the shopping basket stream with the new content
    _shoppingBasketController.sink.add(_shoppingBasket.toList());
    
    // any additional processing such as
    // computation of the total price of the basket
    // number of items, part of the basket...
  }


  //
  // Generates a series of Shopping Items
  // Normally this should come from a call to the server
  // but for this sample, we simply simulate
  //
  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 的组件就会收到变更通知，以便组件自身进行刷新或重建(refresh/rebuild)

5.2. ShoppingPage

这个页面很简单，就是显示所有商品而已：

bloc_shopping_page.dart

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 布局，这个 GridView 是包含在一个 StreamBuilder<List<ShoppingItem>>中的
• 每个商品对应一个 ShoppingItemWidget

5.3. ShoppingBasketPage

This page is very similar to the ShoppingPage except that the StreamBuilder is now listening to variations of the _shoppingBasket stream, exposed by the ShoppingBloc.

这个页面和 ShoppingPage 非常相似，只是其 StreamBuilder 监听对象是 ShoppingBloc 提供的 _shoppingBasket stream 的变更结果

---

5.4. ShoppingItemWidget 和 ShoppingItemBloc

Part Of 模式依赖于ShoppingItemWidget 和 ShoppingItemBloc两个元素的组合应用：

• ShoppingItemWidget 负责显示：
  • 商品信息
  • 添加到购物车或移除的按钮
• ShoppingItemBloc 负责告诉 ShoppingItemWidget 它「是否在购物篮中」状态

我们来看看它们是怎么一起运作的…

5.4.1. ShoppingItemBloc

ShoppingItemBloc 由每个 ShoppingItemWidget 来实例化，并向其提供了自身的商品 ID(identity)；

BLoC 将监听 ShoppingBasket stream 的变更结果，并检查具有特定 ID 的商品是否已在购物篮中；

如果已在购物篮中，BLoC 将抛出一个布尔值(=true)，对应 ID 的 ShoppingItemWidget 将捕获这个布尔值，从而得知自己已经在购物篮中了。

以下就是 BLoC 的代码：

bloc_shopping_item_bloc.dart

class ShoppingItemBloc implements BlocBase {
  // Stream to notify if the ShoppingItemWidget is part of the shopping basket
  BehaviorSubject<bool> _isInShoppingBasketController = BehaviorSubject<bool>();
  Stream<bool> get isInShoppingBasket => _isInShoppingBasketController;


  // Stream that receives the list of all items, part of the shopping basket
  PublishSubject<List<ShoppingItem>> _shoppingBasketController = PublishSubject<List<ShoppingItem>>();
  Function(List<ShoppingItem>) get shoppingBasket => _shoppingBasketController.sink.add;


  // Constructor with the 'identity' of the shoppingItem
  ShoppingItemBloc(ShoppingItem shoppingItem){
    // Each time a variation of the content of the shopping basket
    _shoppingBasketController.stream
                          // we check if this shoppingItem is part of the shopping basket
                         .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

这个组件负责：

• 创建一个 ShoppingItemBloc 实例，并将组件自身的 ID 传递给这个 BLoC 实例
• 监听任何 ShoppingBasket 内容的变化，并将变化情况传递给 BLoC
• l监听 ShoppingItemBloc 获知自身「是否已在购物篮中」状态
• 根据自身是否在购物篮中，显示相应的按钮(添加/移除)
• 用户点击按钮后给出响应：
  • 当用户点击「添加」按钮时，将自身放入到购物篮中
  • 当用户点击「移除」按钮时，将自身从购物篮中移除

来看看具体的实现代码和说明：

bloc_shopping_item.dart

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();


    // As the context should not be used in the "initState()" method,
    // prefer using the "didChangeDependencies()" when you need
    // to refer to the context at initialization time
    _initBloc();
  }


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


    // as Flutter might decide to reorganize the Widgets tree
    // it is preferable to recreate the links
    _disposeBloc();
    _initBloc();
  }


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


  // This routine is reponsible for creating the links
  void _initBloc() {
    // Create an instance of the ShoppingItemBloc
    _bloc = ShoppingItemBloc(widget.shoppingItem);


    // Retrieve the BLoC that handles the Shopping Basket content 
    _shoppingBloc = BlocProvider.of<ShoppingBloc>(context);


    // Simple pipe that transfers the content of the shopping
    // basket to the 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. 这是到底是怎么运作的?

具体每部份的运作方式可参考下图

Part_Of

---

后记

又一篇长文，我倒是希望能够少写点，但是我觉得很多东西要解释清楚。

正如我在前言中说的，就我个人来说这些「模式」我已经中在开发中经常使用了，它们帮我节省了大量的时间和精力，而且产出的代码更加易读和调试；此外还有助于业务和视图的解耦分离。

肯定有大量其它方式也可以做到，甚至是更好的方式，但是本文中的模式对我来说确实很实用，这就是为啥我想与你分享的原因。

请继续关注新的文章，同时祝您编程愉快。

--全文完--