weixin_34352449
weixin_34352449

[译]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 查看。

1. BlocProvider 性能优化

我想先给大家介绍下我结合 InheritedWidget 实现 BlocProvider 的新方案，这种方式相比原来基于 StatefulWidget 实现的方式有性能优势。

1.1. 旧的 BlocProvider 实现方案

之前我是基于一个常规的 StatefulWidget 来实现 BlocProvider 的，代码如下：

bloc_provider_previous.dart

abstract class BlocBase {
  void dispose();
}

// Generic BLoC provider
class BlocProvider<T extends BlocBase> extends StatefulWidget {
  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
  }): super(key: key);

  final T bloc;
  final Widget child;

  @override
  _BlocProviderState createState() => _BlocProviderState();

  static T ofextends BlocBase>(BuildContext context){
    final type = _typeOf>();
    BlocProvider provider = context.ancestorWidgetOfExactType(type);
    return provider.bloc;
  }

  static Type _typeOf() => T;
}

class _BlocProviderState<T> extends State<BlocProvider<BlocBase>>{
  @override
  void dispose(){
    widget.bloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context){
    return widget.child;
  }
}

复制代码

这种方案的优点是：StatefulWidget 的 dispose() 方法可以确保在 BLoC 初始化时分配的内存资源在不需要时可以释放掉。

译者注

这个优点是单独基于 InheritedWidget 很难实现的，因为 InheritedWidget 没有提供 dispose 方法，而 Dart 语言又没有自带的析构函数

虽然这种方案运行起来没啥问题，但从性能角度却不是最优解。

这是因为 context.ancestorWidgetOfExactType() 是一个时间复杂度为 O(n) 的方法，为了获取符合指定类型的 ancestor ，它会沿着视图树从当前 context 开始逐步往上递归查找其 parent 是否符合指定类型。如果当前 context 和目标 ancestor 相距不远的话这种方式还可以接受，否则应该尽量避免使用。

下面是 Flutter 中定义这个方法的源码：

@override
Widget ancestorWidgetOfExactType(Type targetType) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    Element ancestor = _parent;
    while (ancestor != null && ancestor.widget.runtimeType != targetType)
        ancestor = ancestor._parent;
    return ancestor?.widget;
}
复制代码

1.2. 新的 BlocProvider 实现方案

新方案虽然总体也是基于 StatefulWidget 实现的，但是组合了一个 InheritedWidget

译者注

即在原来 StatefulWidget 的 child 外面再包了一个 InheritedWidget

下面是实现的代码：

bloc_provider_new.dart

Type _typeOf() => T;

abstract class BlocBase {
  void dispose();
}

class BlocProvider<T extends BlocBase> extends StatefulWidget {
  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
  }): super(key: key);

  final Widget child;
  final T bloc;

  @override
  _BlocProviderState createState() => _BlocProviderState();

  static T ofextends BlocBase>(BuildContext context){
    final type = _typeOf<_BlocProviderInherited>();
    _BlocProviderInherited provider = 
            context.ancestorInheritedElementForWidgetOfExactType(type)?.widget;
    return provider?.bloc;
  }
}

class _BlocProviderState<T extends BlocBase> extends State<BlocProvider<T>>{
  @override
  void dispose(){
    widget.bloc?.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context){
    return new _BlocProviderInherited(
      bloc: widget.bloc,
      child: widget.child,
    );
  }
}

class _BlocProviderInherited<T> extends InheritedWidget {
  _BlocProviderInherited({
    Key key,
    @required Widget child,
    @required this.bloc,
  }) : super(key: key, child: child);

  final T bloc;

  @override
  bool updateShouldNotify(_BlocProviderInherited oldWidget) => false;
}
复制代码

新方案毫无疑问是具有性能优势的，因为用了 InheritedWidget，在查找符合指定类型的 ancestor 时，我们就可以调用 InheritedWidget 的实例方法 context.ancestorInheritedElementForWidgetOfExactType()，而这个方法的时间复杂度是 O(1)，意味着几乎可以立即查找到满足条件的 ancestor。

Flutter 中该方法的定义源码体现了这一点：

@override
InheritedElement ancestorInheritedElementForWidgetOfExactType(Type targetType) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    final InheritedElement ancestor = _inheritedWidgets == null 
                                    ? null 
                                    : _inheritedWidgets[targetType];
    return ancestor;
}
复制代码

当然这也是源于 Fluter Framework 缓存了所有 InheritedWidgets 才得以实现。

为什么要用 ancestorInheritedElementForWidgetOfExactType 而不用 inheritFromWidgetOfExactType ?

因为 inheritFromWidgetOfExactType 不仅查找获取符合指定类型的Widget，还将context 注册到该Widget，以便Widget发生变动后，context可以获取到新值；

这并不是我们想要的，我们想要的仅仅就是符合指定类型的Widget(也就是 BlocProvider)而已。

1.3. 如何使用新的 BlocProvider 方案?

1.3.1. 注入 BLoC

Widget build(BuildContext context){
    return BlocProvider{
        bloc: myBloc,
        child: ...
    }
}
复制代码

1.3.2. 获取 BLoC

Widget build(BuildContext context){
    MyBloc myBloc = BlocProvider.of(context);
    ...
}
复制代码

2. BLoC 的范围和初始化

要回答「要在哪初始化 BLoC？」这个问题，需要先搞清楚 BLoC 的可用范围 (scope)。

2.1. 应用中任何地方可用

在实际应用中，常常需要处理如用户鉴权、用户档案、用户设置项、购物篮等等需要在 App 中任何组件都可访问的数据或状态，这里总结了适用这种情况的两种 BLoC 方案：

2.1.1. 全局单例 (Global Singleton)

这种方案使用了一个不在Widget视图树中的 Global 对象，实例化后可用供所有 Widget 使用。

bloc_singleton.dart

import 'package:rxdart/rxdart.dart';

class GlobalBloc {
  ///
  /// Streams related to this BLoC
  ///
  BehaviorSubject<String> _controller = BehaviorSubject<String>();
  Function(String) get push => _controller.sink.add;
  Stream<String> get stream => _controller;

  ///
  /// Singleton factory
  ///
  static final GlobalBloc _bloc = new GlobalBloc._internal();
  factory GlobalBloc(){
    return _bloc;
  }
  GlobalBloc._internal();
  
  ///
  /// Resource disposal
  ///
  void dispose(){
    _controller?.close();
}

GlobalBloc globalBloc = GlobalBloc();
复制代码

要使用全局单例 BLoC，只需要 import 后调用定义好的方法即可：

import 'global_bloc.dart';

class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        globalBloc.push('building MyWidget'); //调用 push 方法添加数据 
        return Container();
    }
}
复制代码

如果你想要一个唯一的、可从应用中任何组件访问的 BLoC 的话，这个方案还是不错的，因为：

  • 简单易用
  • 不依赖任何 BuildContext
  • 当然也不需要通过 context 查找 BlocProvider 的方式来获取 BLoC
  • 释放资源也很简单，只需将 application Widget 基于 StatefulWidget 实现，然后重写其 dispose() 方法，在 dispose() 中调用 globalBloc.dispose() 即可

我也不知道具体是为啥，很多较真的人反对全局单例方案，所以…我们再来看另一种实现方案吧…

2.1.2. 注入到视图树顶层

在 Flutter 中，包含所有页面的ancestor本身必须是 MaterialApp 的父级。 这是因为页面(或者说Route)其实是作为所有页面共用的 Stack 中的一项，被包含在 OverlayEntry 中的。

换句话说，每个页面都有自己独立于任何其它页面的 Buildcontext。这也解释了为啥不用任何技巧是没办法实现两个页面(或路由)之间数据共享的。

因此，必须将 BlocProvider 作为 MaterialApp 的父级才能实现在应用中任何位置都可使用 BLoC，如下所示：

bloc_on_top.dart

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

class Application extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      bloc: AuthenticationBloc(),
      child: MaterialApp(
        title: 'BLoC Samples',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: InitializationPage(),
      ),
    );
  }
}
复制代码

2.2. 在子视图树(多个页面或组件)中可用

大多数时候，我们只需要在应用的部分页面/组件树中使用 BLoC。举个例子，在一个 App 中有类似论坛的功能模块，在这个功能模块中我们需要用到 BLoC 来实现：

  • 与后端服务器交互，获取、添加、更新帖子
  • 在特定的页面列出需要显示的数据
  • …

显然我们不需要将论坛的 BLoC 实现成全局可用，只需在涉及论坛的视图树中可用就行了。

那么可采用通过 BlocProvider将 BLoC 作为模块子树的根(父级)注入的方式，如下所示：

bloc_init_root.dart

class MyTree extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return BlocProvider(
      bloc: MyBloc(),
      child: Column(
        children: [
          MyChildWidget(),
        ],
      ),
    );
  }
}

class MyChildWidget extends StatelessWidget {
  @override 
  Widget build(BuildContext context){
    MyBloc = BlocProvider.of(context);
    return Container();
  }
}
复制代码

这样，该模块下所有 Widget 都可以通过调用 BlocProvider.of 来获取 BLoC.

注意

上面给出的并不是最佳方案，因为每次 MyTree 重构(rebuild)时都会重新初始化 BLoC ，带来的结果是：

  • 丢失 BLoC 中已经存在的数据内容
  • 重新初始化BLoC 要占用 CPU 时间

在这个例子中更好的方式是使用 StatefulWidget ，利用其持久化 State 的特性解决上述问题，代码如下：

bloc_init_root_2.dart

class MyTree extends StatefulWidget {
 @override
  _MyTreeState createState() => _MyTreeState();
}
class _MyTreeState extends State<MyTree>{
  MyBloc bloc;
  
  @override
  void initState(){
    super.initState();
    bloc = MyBloc();
  }
  
  @override
  void dispose(){
    bloc?.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context){
    return BlocProvider(
      bloc: bloc,
      child: Column(
        children: [
          MyChildWidget(),
        ],
      ),
    );
  }
}
复制代码

这样实现的话，即使 MyTree 组件重构，也不会重新初始化 BLoC，而是直接使用之前的BLoC实例。

2.3. 单一组件中可用

如果只在某一个组件 (Widget) 中使用 BLoC，只需要在该组件内构建 BLoC 实例即可。

3. 事件与状态管理(Event - State)

有时侯需要我们编码实现一些棘手的业务流程，这些流程可能会由串行或并行、耗时长短不一、同步或异步的子流程构成的，很可能每个子流程的处理结果也是千变万化的，而且还可能需要根据其处理进度或状态进行视图更新。

而本文中「事件与状态管理」解决方案的目的就是让处理这种复杂的业务流程变得更简单。

方案是基于以下流程和规则的：

  • 发出某个事件
  • 该事件触发一些动作 (action) ，这些动作会导致一个或多个状态产生/变更
  • 这些状态又触发其它事件，或者产生/变更为其它状态
  • 然后这些事件又根据状态的变更情况，触发其它动作
  • 等等…

为了更好的展示这些概念，我还举了两个具体的例子：

  • 应用初始化 (Application initialization)

    很多时候我们都需要运行一系列动作来初始化 App， 这些动作可能是与服务器的交互相关联的 (例如：获取并加载一些数据)。而且在初始化过程中，可能还需要显示进度条及载入动画让用户能耐心等待。

  • 用户身份验证 (Authentication)

    在 App 启动后需要用户登录或注册，用户成功登录后，将跳转(重定向)到 App 的主页面； 而用户注销则将跳转(重定向)到验证页面。

为了应对所有的可能，我们将管理一系列的事件，而这些事件可能是在 App 中任何地方触发的，这使得事件和状态的管理异常复杂，所幸我们可以借助结合了 BlocEventStateBuider 的 BlocEventState 类大大降低事件和状态管理的难度。

3.1. BlocEventState 抽象类

BlocEventState 背后的逻辑是将 BLoC 定义成这样一套机制：

  • 接收事件 (event) 作为输入
  • 当新的事件触发(输入)时，调用一个对应的事件处理器 eventHandler
  • 事件处理器 (eventHandler) 负责根据事件 (event) 采用适当的处理 (actions) 后，抛出一个或多个状态 (State) 作为响应

如下图所示：

定义 BlocEventState 的代码和说明如下：

bloc_event_state.dart

import 'package:blocs/bloc_helpers/bloc_provider.dart';
import 'package:meta/meta.dart';
import 'package:rxdart/rxdart.dart';

abstract class BlocEvent extends Object {}
abstract class BlocState extends Object {}

abstract class BlocEventStateBase<BlocEvent, BlocState> implements BlocBase {
  PublishSubject _eventController = PublishSubject();
  BehaviorSubject _stateController = BehaviorSubject();

  ///
  /// To be invoked to emit an event
  ///
  Function(BlocEvent) get emitEvent => _eventController.sink.add;

  ///
  /// Current/New state
  ///
  Stream get state => _stateController.stream;

  ///
  /// External processing of the event
  ///
  Stream eventHandler(BlocEvent event, BlocState currentState);

  ///
  /// initialState
  ///
  final BlocState initialState;

  //
  // Constructor
  //
  BlocEventStateBase({
    @required this.initialState,
  }){
    //
    // For each received event, we invoke the [eventHandler] and
    // emit any resulting newState
    //
    _eventController.listen((BlocEvent event){
      BlocState currentState = _stateController.value ?? initialState;
      eventHandler(event, currentState).forEach((BlocState newState){
        _stateController.sink.add(newState);
      });
    });
  }

  @override
  void dispose() {
    _eventController.close();
    _stateController.close();
  }
}
复制代码

如代码所示，我们定义的其实是一个抽象类，是需要扩展实现的，实现的重点就是定义 eventHandler 这个方法的具体行为。

当然我们还可以看到：

  • Sink (代码中的 emitEvent) 作为事件 Event 的输入入口
  • Stream (代码中的 state) 监听已发出的状态 State(s) 作为状态的输出出口

在这个类初始化时 (参考代码中 Constructor 部分)：

  • 需要提供初始状态 initialState
  • 创建了一个 StreamSubscription 用来监听输入的事件 (Events) 并：
    • 将事件分配给事件处理器 eventHandler
    • 抛出结果 state(s)

3.2. BlocEventState 的扩展实现

下方的模板代码就是基于扩展 BlocEventStateBase 抽象类实现了一个具体的 BlocEventState 类：

bloc_event_state_template.dart

class TemplateEventStateBloc extends BlocEventStateBase<BlocEvent, BlocState> {
  TemplateEventStateBloc()
      : super(
          initialState: BlocState.notInitialized(),
        );

  @override
  Stream eventHandler( BlocEvent event, BlocState currentState) async* {
     yield BlocState.notInitialized();
  }
}
复制代码

模板代码会报错，请不要担心，这是正常的…因为我们还没有定义 BlocState.notInitialized()…后面会给出的。

这个模板只是在初始化时简单地给出了一个初始状态 initialState，并覆写了 eventHandler 方法。

还需要注意的是，我们使用了 异步生成器 (asynchronous generator) 语法：async* 和 yield

使用 async* 修饰符可将某个方法标记为一个 异步生成器(asynchronous generator) 方法，比如上面的代码中每次调用 eventHandler 方法内 yield 语句时，它都会把 yield 后面的表达式结果添加到输出 Stream 中。

如果我们需要通过一系列动作触发一系列 States (后面会在范例中看到)，这一点特别有用。

有关 异步生成器 的其他详细信息，可参考 这篇文章。

3.3. BlocEvent 和 BlocState

你可能注意到了，我们还定义了 BlocEvent 和 BlocState 两个抽象类，这两个抽象类都是要根据实际情况，也就是在实际业务场景中根据你想要触发的事件和抛出的状态来具体 扩展实现 的。

3.4. BlocEventStateBuilder 组件

这个模式的最后一部分就是 BlocEventStateBuilder 组件了，这个组件可以根据 BlocEventState 抛出的 State(s) 作出视图层面的响应。

代码如下：

bloc_event_state_builder.dart

typedef Widget AsyncBlocEventStateBuilder(BuildContext context, BlocState state);

class BlocEventStateBuilder<BlocEvent,BlocState> extends StatelessWidget {
  const BlocEventStateBuilder({
    Key key,
    @required this.builder,
    @required this.bloc,
  }): assert(builder != null),
      assert(bloc != null),
      super(key: key);

  final BlocEventStateBase bloc;
  final AsyncBlocEventStateBuilder builder;

  @override
  Widget build(BuildContext context){
    return StreamBuilder(
      stream: bloc.state,
      initialData: bloc.initialState,
      builder: (BuildContext context, AsyncSnapshot snapshot){
        return builder(context, snapshot.data);
      },
    );
  }
}
复制代码

其实这个组件除了一个 StreamBuilder 外没啥特别的，这个 StreamBuilder 的作用就是每当有新的 BlocState 抛出后，将其作为新的参数值调用 builder 方法。

好了，这些就是这个模式的全部构成，接下来我们看看可以用它们来做些啥…

3.5. 事件与状态管理例1: 应用初始化 (Application Initialization)

第一个例子演示了 App 在启动时执行某些任务的情况。

一个常见的场景就是游戏的启动画面，也称 Splash 界面(不管是不是动画的)，在显示真正的游戏主界面前，游戏应用会从服务器获取一些文件、检查是否需要更新、尝试与系统的「游戏中心」通讯等等；而且在完成初始化前，为了不让用户觉得应用啥都没做，可能还会显示进度条、定时切换显示一些图片等。

我给出的实现是非常简单的，只显示了完成百分比的，你可以根据自己的需要非常容易地进行扩展。

首先要做的就是定义事件和状态…

3.5.1. 定义事件: ApplicationInitializationEvent

作为例子，这里我只考虑了 2 个事件：

  • start：触发初始化处理过程
  • stop：用于强制停止初始化过程

它们的定义如下：

app_init_event.dar

class ApplicationInitializationEvent extends BlocEvent {
  
  final ApplicationInitializationEventType type;

  ApplicationInitializationEvent({
    this.type: ApplicationInitializationEventType.start,
  }) : assert(type != null);
}

enum ApplicationInitializationEventType {
  start,
  stop,
}
复制代码

3.5.2. 定义状态: ApplicationInitializationState

ApplicationInitializationState 类将提供与初始化过程相关的信息。

同样作为例子，这里我只考虑了：

  • 2 个 flag:
    • isInitialized 用来标识初始化是否完成
    • isInitializing 用来知晓我们是否处于初始化过程中
  • 进度完成率 prograss

代码如下：

app_init_state.dart

class ApplicationInitializationState extends BlocState {
  ApplicationInitializationState({
    @required this.isInitialized,
    this.isInitializing: false,
    this.progress: 0,
  });

  final bool isInitialized;
  final bool isInitializing;
  final int progress;

  factory ApplicationInitializationState.notInitialized() {
    return ApplicationInitializationState(
      isInitialized: false,
    );
  }

  factory ApplicationInitializationState.progressing(int progress) {
    return ApplicationInitializationState(
      isInitialized: progress == 100,
      isInitializing: true,
      progress: progress,
    );
  }

  factory ApplicationInitializationState.initialized() {
    return ApplicationInitializationState(
      isInitialized: true,
      progress: 100,
    );
  }
}
复制代码

3.5.3. 实现 BLoC: ApplicationInitializationBloc

BLoC 将基于事件类型来处理具体的初始化过程。

代码如下：

bloc_init_bloc.dart

class ApplicationInitializationBloc
    extends BlocEventStateBase<ApplicationInitializationEvent, ApplicationInitializationState> {
  ApplicationInitializationBloc()
      : super(
          initialState: ApplicationInitializationState.notInitialized(),
        );

  @override
  Stream eventHandler(
      ApplicationInitializationEvent event, ApplicationInitializationState currentState) async* {
    
    if (!currentState.isInitialized){
      yield ApplicationInitializationState.notInitialized();
    }

    if (event.type == ApplicationInitializationEventType.start) {
      for (int progress = 0; progress < 101; progress += 10){
        await Future.delayed(const Duration(milliseconds: 300));
        yield ApplicationInitializationState.progressing(progress);
      }
    }

    if (event.type == ApplicationInitializationEventType.stop){
      yield ApplicationInitializationState.initialized();
    }
  }
}
复制代码

说明：

  • 当接收到 ApplicationInitializationEventType.start 事件时，进度完成率 prograss 将从 0 到 100 开始计数(每次步进 10)，而且未到 100 时每次都将通过 yield 抛出一个新状态 (state) 告知初始化正在进行 (isInitializing = true) 及完成进度 prograss 具体的值
  • 当接收到 ApplicationInitializationEventType.stop 事件时，会认为初始化已经完成。
  • 如你所见，我在循环过程中加了些延迟 (delay) ，目的是演示 Future的适用场景(如从服务器获取数据)

3.5.4. 组合使用

现在，剩下的事情就是把代表进度完成率的计数器显示到假的 Splash 界面上：

bloc_init_page.dart

class InitializationPage extends StatefulWidget {
  @override
  _InitializationPageState createState() => _InitializationPageState();
}

class _InitializationPageState extends State<InitializationPage> {
  ApplicationInitializationBloc bloc;

  @override
  void initState(){
    super.initState();
    bloc = ApplicationInitializationBloc();
    bloc.emitEvent(ApplicationInitializationEvent());
  }

  @override
  void dispose(){
    bloc?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext pageContext) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          child: Center(
            child: BlocEventStateBuilder(
              bloc: bloc,
              builder: (BuildContext context, ApplicationInitializationState state){
                if (state.isInitialized){
                  //
                  // Once the initialization is complete, let's move to another page
                  //
                  WidgetsBinding.instance.addPostFrameCallback((_){
                    Navigator.of(context).pushReplacementNamed('/home');
                  });
                }
                return Text('Initialization in progress... ${state.progress}%');
              },
            ),
          ),
        ),
      ),
    );
  }
}
复制代码

说明:

  • 在 App 中，ApplicationInitializationBloc 并不是任何组件都需要用到，所以只在一个 StatefulWidget 中初始化(实例化)了该 BLoC
  • 直接发出 ApplicationInitializationEventType.start 事件来触发 eventHandler
  • 每次 ApplicationInitializationState 被抛出，都会更新文字内容
  • 初始化过程完成后，跳转(重定向)到了 Home 界面

小技巧

由于无法直接跳转到 Home 界面，在 builder 方法中，使用了WidgetsBinding.instance.addPostFrameCallback() 方法来请求 Flutter 在完成渲染后执行跳转。参考 addPostFrameCallback()

3.6. 事件与状态管理例2: 用户身份验证(登录与注销)

在这个例子中，我考虑了如下场景：

  • 如果用户没有登录，则自动显示 登录/注册(Authentication/Registration) 界面
  • 用户提交登录信息后，显示一个代表正在处理的循环进度指示器(转圈圈)
  • 一旦用户登录成功，将跳转到 Home 界面
  • 在 App 任何地方，用户都可能注销
  • 如果用户注销，将自动跳转到 登录(Authentication) 界面

当然以其它编程方式也可以实现这些功能，但以 BLoC 的方式来实现可能更简单。

下图解释了将要实现的方案流程：

中间跳转页面 DecisionPage 将负责 自动 将用户重定向到 Authentication 界面或 Home 界面，具体到哪个界面取决于用户的登录状态。当然 DecisionPage 不会显示给用户，也不应该将其视为一个真正的页面。

同样首先要做的是定义一些事件和状态…

3.6.1. 定义事件: AuthenticationEvent

作为例子，我只考虑了2个事件：

  • login：用户成功登录时会发出该事件
  • logout：用户注销时会发出该事件

它们的定义如下：

bloc_auth_event.dart

abstract class AuthenticationEvent extends BlocEvent {
  final String name;

  AuthenticationEvent({
    this.name: '',
  });
}

class AuthenticationEventLogin extends AuthenticationEvent {
  AuthenticationEventLogin({
    String name,
  }) : super(
          name: name,
        );
}

class AuthenticationEventLogout extends AuthenticationEvent {}
复制代码

3.6.2. 定义状态: AuthenticationState

AuthenticationState 类将提供与验证过程相关的信息。

同样作为例子，我只考虑了：

  • 3 个 flag:
    • isAuthenticated 用来标识验证是否完成
    • isAuthenticating 用来知晓是否处于验证过程中
    • hasFailed 用来表示身份是否验证失败
  • 经过身份验证后的用户名：name

代码如下：

bloc_auth_state.dart

class AuthenticationState extends BlocState {
  AuthenticationState({
    @required this.isAuthenticated,
    this.isAuthenticating: false,
    this.hasFailed: false,
    this.name: '',
  });

  final bool isAuthenticated;
  final bool isAuthenticating;
  final bool hasFailed;

  final String name;
  
  factory AuthenticationState.notAuthenticated() {
    return AuthenticationState(
      isAuthenticated: false,
    );
  }

  factory AuthenticationState.authenticated(String name) {
    return AuthenticationState(
      isAuthenticated: true,
      name: name,
    );
  }

  factory AuthenticationState.authenticating() {
    return AuthenticationState(
      isAuthenticated: false,
      isAuthenticating: true,
    );
  }

  factory AuthenticationState.failure() {
    return AuthenticationState(
      isAuthenticated: false,
      hasFailed: true,
    );
  }
}
复制代码

3.6.3. 实现 BLoC: AuthenticationBloc

BLoC 将基于事件类型来处理具体的身份验证过程。

代码如下：

bloc_auth_bloc.dart

class AuthenticationBloc
    extends BlocEventStateBase<AuthenticationEvent, AuthenticationState> {
  AuthenticationBloc()
      : super(
          initialState: AuthenticationState.notAuthenticated(),
        );

  @override
  Stream eventHandler(
      AuthenticationEvent event, AuthenticationState currentState) async* {

    if (event is AuthenticationEventLogin) {
      // Inform that we are proceeding with the authentication
      yield AuthenticationState.authenticating();

      // Simulate a call to the authentication server
      await Future.delayed(const Duration(seconds: 2));

      // Inform that we have successfuly authenticated, or not
      if (event.name == "failure"){
        yield AuthenticationState.failure();
      } else {
        yield AuthenticationState.authenticated(event.name);
      }
    }

    if (event is AuthenticationEventLogout){
      yield AuthenticationState.notAuthenticated();
    }
  }
}
复制代码

说明:

  • 当接收到 AuthenticationEventLogin事件时，会通过 yield 抛出一个新状态 (state) 告知身份验证正在进行 (isAuthenticating = true)
  • 当身份验证一旦完成，会抛出另一个新的状态 (state) 告知已经完成了
  • 当接收到 AuthenticationEventLogout 事件时，会抛出一个新状态 (state) 告知用户已经不在是已验证状态

3.6.4. 登录页面: AuthenticationPage

如你所见，为了便于说明，这个页面并没有做的很复杂。

代码及说明如下：

bloc_auth_page.dart

class AuthenticationPage extends StatelessWidget {
  ///
  /// Prevents the use of the "back" button
  ///
  Future<bool> _onWillPopScope() async {
    return false;
  }

  @override
  Widget build(BuildContext context) {
    AuthenticationBloc bloc = BlocProvider.of(context);
    return WillPopScope(
      onWillPop: _onWillPopScope,
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Authentication Page'),
            leading: Container(),
          ),
          body: Container(
            child:
                BlocEventStateBuilder(
              bloc: bloc,
              builder: (BuildContext context, AuthenticationState state) {
                if (state.isAuthenticating) {
                  return PendingAction();
                }

                if (state.isAuthenticated){
                  return Container();
                }
                
                List children = [];

                // Button to fake the authentication (success)
                children.add(
                  ListTile(
                      title: RaisedButton(
                        child: Text('Log in (success)'),
                        onPressed: () {
                            bloc.emitEvent(AuthenticationEventLogin(name: 'Didier'));
                        },
                      ),
                    ),
                );

                // Button to fake the authentication (failure)
                children.add(
                  ListTile(
                      title: RaisedButton(
                        child: Text('Log in (failure)'),
                        onPressed: () {
                            bloc.emitEvent(AuthenticationEventLogin(name: 'failure'));
                        },
                      ),
                    ),
                );

                // Display a text if the authentication failed
                if (state.hasFailed){
                  children.add(
                    Text('Authentication failure!'),
                  );
                }

                return Column(
                  children: children,
                );    
              },
            ),
          ),
        ),
      ),
    );
  }
}
复制代码

说明:

  • 第 11 行：在页面中获取 AuthenticationBloc
  • 第 24 ~ 70 行：监听被抛出的 AuthenticationState：
    • 如果正在验证过程中，会显示循环进度指示器(转圈圈)，告知用户正在处理中，并阻止用户访问到其它页面(第25 ~ 27 行)
    • 如果验证成功，显示一个空的 Container，即不显示任何内容 (第 29 ~ 31 行)
    • 如果用户还没有登录，显示2个按钮，可模拟登录成功和失败的情况
    • 当点击其中一个按钮时，会发出 AuthenticationEventLogin 事件以及一些参数(通常会被用于验证处理)
    • 如果身份验证失败，显示一条错误消息(第 60 ~ 64 行)

好了，没啥别的事了，很简单对不？

小技巧

你肯定注意到了，我把页面包在了 WillPopScope 里面，这是因为身份验证是必须的步骤，除非成功登录(验证通过)，我不希望用户使用 Android 设备提供的 Back 键来跳过验证访问到其它页面。

3.6.5. 中间跳转页面: DecisionPage

如前所述，我希望 App 根据用户登录状态自动跳转到 AuthenticationPage 或 HomePage

代码及说明如下：

bloc_decision_page.dart

class DecisionPage extends StatefulWidget {
  @override
  DecisionPageState createState() {
    return new DecisionPageState();
  }
}

class DecisionPageState extends State<DecisionPage> {
  AuthenticationState oldAuthenticationState;

  @override
  Widget build(BuildContext context) {
    AuthenticationBloc bloc = BlocProvider.of(context);
    return BlocEventStateBuilder(
      bloc: bloc,
      builder: (BuildContext context, AuthenticationState state) {
        if (state != oldAuthenticationState){
          oldAuthenticationState = state;

          if (state.isAuthenticated){
            _redirectToPage(context, HomePage());
          } else if (state.isAuthenticating || state.hasFailed){
  //do nothing
          } else {
            _redirectToPage(context, AuthenticationPage());
          }
        }
        // This page does not need to display anything since it will
        // always remind behind any active page (and thus 'hidden').
        return Container();
      }
    );
  }

  void _redirectToPage(BuildContext context, Widget page){
    WidgetsBinding.instance.addPostFrameCallback((_){
      MaterialPageRoute newRoute = MaterialPageRoute(
          builder: (BuildContext context) => page
        );

      Navigator.of(context).pushAndRemoveUntil(newRoute, ModalRoute.withName('/decision'));
    });
  }
}
复制代码

提示

为了详细解释下面的问题，我们先回溯下 Flutter 处理 Pages(也就是 路由Route)的方式，即使用 Navigator 对象来管理 Routes，而 Navigator 对象创建了一个 Overlay 对象；这个 Overlay 其实是包含多个 OverlayEntry 的 Stack 对象，而每个 OverlayEntry 都包含了一个 Page；

当我们通过 Navigator.of(context) 操作路由堆栈进行压入、弹出或替换时，也会更新 Overlay 对象(也就是Stack 对象)，换句话说，这些操作会导致 Stack 对象的重构；而 Stack 重构时，OverlayEntry (包括其内容 Page)也会跟着重构；

结果就是：

当我们通过 Navigator.of(context) 进行路由操作后，所有其它页面都会重构！

  • 那么，为啥我要把它实现为 StatefulWidget ?

    为了能够响应 AuthenticationState 任何变更，这个 page 需要在 App 整个生命周期内保留；

    而根据上面的提示，每次调用 Navigator.of(context) 后，这个页面都会被重构，因此也会重构 BlocEventStateBuilder ，毫无疑问 BlocEventStateBuilder 里面的 builder 方法也会被调用；

    因为这个 builder 方法是负责将用户重定向到与 AuthenticationState 对应的页面，重定向又要通过 Navigator.of(context) 来实现…明显死循环了

    所以为了防止这种情况发生，我们需要将「最后一个」 AuthenticationState 存起来，只有当新的 AuthenticationState 与已存的不一样时，我们才进行重定向处理；

    而实现存储就是利用 StatefulWidget 的特性，将「最后一个」 AuthenticationState 放到了 State 的 oldAuthenticationState 属性中。

  • 到底是怎么运作的？

    如上所诉，每当 AuthenticationState 被抛出时，BlocEventStateBuilder 会调用 builder 方法，根据 isAuthenticated 标识，我们就知道具体将用户重定向到哪个页面。

小技巧

由于在 builder 中无法直接跳转到其它界面，我们使用了WidgetsBinding.instance.addPostFrameCallback() 方法来请求 Flutter 在完成渲染后执行跳转。

此外，除了 DecisionPage 需要在整个应用生命周期保留之外，我们需要移除路由堆栈中重定向前所有其它已存在的页面，所以我们使用了 Navigator.of(context).pushAndRemoveUntil(…) 来实现这一目的。参考 pushAndRemoveUntil()

3.6.6. 用户注销

为了让用户能够注销，可以创建一个 LogOutButton，放到 App 中任何地方。

这个按钮只需要点击后发出 AuthenticationEventLogout() 事件，这个事件会触发如下的自动处理动作：

  1. 事件由 AuthenticationBloc 进行处理
  2. 处理后抛出一个 AuthentiationState(isAuthenticated = false)
  3. 抛出的状态将由DecisionPage 通过 BlocEventStateBuilder 进行处理
  4. 最后将用户重定向到 AuthenticationPage

按钮代码如下：

bloc_log_out_button.dart

class LogOutButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    AuthenticationBloc bloc = BlocProvider.of(context);
    return IconButton(
      icon: Icon(Icons.exit_to_app),
      onPressed: () {
        bloc.emitEvent(AuthenticationEventLogout());
      },
    );
  }
}
复制代码

3.6.7. 注入 AuthenticationBloc

由于需要 AuthenticationBloc 在应用中任何页面都可用，所以我们将其注入为 MaterialApp 的父级，如下所示：

bloc_auth_app.dart

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

class Application extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      bloc: AuthenticationBloc(),
      child: MaterialApp(
        title: 'BLoC Samples',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: DecisionPage(),
      ),
    );
  }
}
复制代码

4. 表单验证

BLoC 另一个有意思的应用场景就是表单的验证，比如：

  • 验证某个 TextField 表单项是否满足一些业务规则
  • 业务规则验证错误时显示提示信息
  • 根据业务规则自动处理表单组件是否可用

下面的例子中，我用了一个名叫 RegistrationForm 的表单，这个表单包含3个 TextField (分别为电子邮箱email、密码password和重复密码 confirmPassword)以及一个按钮 RaisedButton 用来发起注册处理

想要实现的业务规则有：

  • email 需要是有效的电子邮箱地址，如果不是的话显示错误提示信息
  • password 也必须需有效，即包括至少1个大写字母、1个小写字母、1个数字和1个特殊字符在内，且不少于8位字符，如果不是的话也需要显示错误提示信息
  • 重复密码 retype password 除了需要和 password 一样的验证规则外，还需要和 password 完全一样，如果不是的话，显示错误提示信息
  • register 按钮只有在以上所有规则都验证通过后才能使用

4.1. RegistrationFormBloc

如前所述，这个 BLoC 负责业务规则验证的处理，实现的代码如下：

bloc_reg_form_bloc.dart

class RegistrationFormBloc extends Object with EmailValidator, PasswordValidator implements BlocBase {

  final BehaviorSubject<String> _emailController = BehaviorSubject<String>();
  final BehaviorSubject<String> _passwordController = BehaviorSubject<String>();
  final BehaviorSubject<String> _passwordConfirmController = BehaviorSubject<String>();

  //
  //  Inputs
  //
  Function(String) get onEmailChanged => _emailController.sink.add;
  Function(String) get onPasswordChanged => _passwordController.sink.add;
  Function(String) get onRetypePasswordChanged => _passwordConfirmController.sink.add;

  //
  // Validators
  //
  Stream<String> get email => _emailController.stream.transform(validateEmail);
  Stream<String> get password => _passwordController.stream.transform(validatePassword);
  Stream<String> get confirmPassword => _passwordConfirmController.stream.transform(validatePassword)
    .doOnData((String c){
      // If the password is accepted (after validation of the rules)
      // we need to ensure both password and retyped password match
      if (0 != _passwordController.value.compareTo(c)){
        // If they do not match, add an error
        _passwordConfirmController.addError("No Match");
      }
    });

  //
  // Registration button
  Stream<bool> get registerValid => Observable.combineLatest3(
                                      email, 
                                      password, 
                                      confirmPassword, 
                                      (e, p, c) => true
                                    );

  @override
  void dispose() {
    _emailController?.close();
    _passwordController?.close();
    _passwordConfirmController?.close();
  }
}
复制代码

说明：

  • 这个类中我们最先初始化了 3 个 BehaviorSubject，用来处理表单中 3 个 TextField 的 Stream
  • 这个类提供了 3 个 Function(String) ，用来接收来自 TextField 的输入
  • 这个类提供了 3 个 Stream ，在 TextField 验证失败时，显示各自的错误信息
  • 同时还提供了 1 个 Stream，作用是根据全部表单项的验证结果，控制 RaisedButton 是否可用 (enable/disabe)

好了，我们来深入了解更多的细节…

你可能注意到了，这个 BLoC 类的代码有点特殊，是这样的：

class RegistrationFormBloc extends Object 
                           with EmailValidator, PasswordValidator 
                           implements BlocBase {
  ...
}
复制代码

使用了 with 关键字表明这个类用到了 MIXINS (一种在另一个类中重用类代码的方法)，而且为了使用 with，这个类还需要基于 Object 类进行扩展。这些 mixins 包含了 email 和 password 各自的验证方式。

关于 Mixins 更多信息建议阅读 Romain Rastel 的这篇文章。

4.1.1. 表单验证用到的 Mixins

我这里只对 EmailValidator 进行说明，因为 PasswordValidator 也是类似的。

首先，代码如下：

bloc_email_validator.dart

const String _kEmailRule = r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$";


class EmailValidator {
  final StreamTransformer<String,String> validateEmail = 
      StreamTransformer<String,String>.fromHandlers(handleData: (email, sink){
        final RegExp emailExp = new RegExp(_kEmailRule);


        if (!emailExp.hasMatch(email) || email.isEmpty){
          sink.addError('Entre a valid email');
        } else {
          sink.add(email);
        }
      });
}
复制代码

这个类提供了一个 final 方法 (validateEmail)，这个方法其实返回的是一个 StreamTransformer 实例

提示

StreamTransformer 的调用方式为：stream.transform(StreamTransformer)

StreamTransformer 从 Stream 获取输入，然后引用 Stream 的 transform 方法进行输入的处理，并将处理后的数据重新注入到初始的 Stream 中。

在上面的代码中，处理流程包括根据一个 正则表达式 检查输入的内容，如果匹配则将输入的内容重新注入到 stream 中；如果不匹配，则将错误信息注入给 stream

4.1.2. 为什么要用 stream.transform()?

如前所述，如果验证成功，StreamTransformer 会把输入的内容重新注入回 Stream，具体是怎么运作的呢？

我们先看看 Observable.combineLatest3() 这个方法，它在每个 Stream 全都抛出至少一个值之前，并不会给出任何值

如下图所示：

  • 如果用户输入的 email 是有效的，email 的 stream 会抛出用户输入的内容，同时再作为 Observable.combineLatest3() 的一个输入
  • 如果用户输入的 email 是无效的，email 的 stream 中会被添加一条错误信息(而且 stream 不会抛出数据)
  • password 和 retype password 也是类似的机制
  • 当它们3个都验证通过时(也就是 3 个 stream 都抛出了数据)，Observable.combineLatest3() 会借助 (e, p, c) => true 方法抛出一个 true 值(见代码第 35 行)

4.1.3. 密码与重复密码验证

我在网上看到有很多关于密码与重复密码的验证问题，解决方案肯定是有很多的，这里我针对其中两种说明下。

4.1.3.1. 无错误提示的基础方案

第一种解决方案的代码如下：

bloc_password_valid_1.dart

Stream<bool> get registerValid => Observable.combineLatest3(
                                      email, 
                                      password, 
                                      confirmPassword, 
                                      (e, p, c) => (0 == p.compareTo(c))
                                    );
复制代码

这个解决方案只是在验证了两个密码之后，将它们进行比较，如果它们一样，则会抛出一个 true 值。

等下我们会看到，Register 按钮是否可用是依赖于 registerValid stream 的，如果两个密码不一样，registerValid stream 就不会抛出任何值，所以 Register 按钮依然是不可用状态。

但是，用户不会接收到任何错误提示信息，所以也不明白发生了什么。

4.1.3.2. 具有错误提示的方案

另一种方案是把 confirmPassword stream的处理方法进行了扩展，代码如下：

bloc_password_valid_2.dart

Stream<String> get confirmPassword => _passwordConfirmController.stream.transform(validatePassword)
    .doOnData((String c){
      // If the password is accepted (after validation of the rules)
      // we need to ensure both password and retyped password match
      if (0 != _passwordController.value.compareTo(c)){
        // If they do not match, add an error
        _passwordConfirmController.addError("No Match");
      }
    });
复制代码

一旦 retype password 业务规则验证通过， 用户输入的内容会被 Stream 抛出，并调用 doOnData() 方法，在该方法中通过 _passwordController.value.compareTo() 获取是否与 password stream 中的数据一样，如果不一样，我们就可用添加错误提示了。

4.2. RegistrationForm 组件

在解释说明前我们先来看看 Form 组件的实现代码：

bloc_reg_form.dart

class RegistrationForm extends StatefulWidget {
  @override
  _RegistrationFormState createState() => _RegistrationFormState();
}


class _RegistrationFormState extends State<RegistrationForm> {
  RegistrationFormBloc _registrationFormBloc;


  @override
  void initState() {
    super.initState();
    _registrationFormBloc = RegistrationFormBloc();
  }


  @override
  void dispose() {
    _registrationFormBloc?.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
        children: [
          StreamBuilder<String>(
              stream: _registrationFormBloc.email,
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                return TextField(
                  decoration: InputDecoration(
                    labelText: 'email',
                    errorText: snapshot.error,
                  ),
                  onChanged: _registrationFormBloc.onEmailChanged,
                  keyboardType: TextInputType.emailAddress,
                );
              }),
          StreamBuilder<String>(
              stream: _registrationFormBloc.password,
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                return TextField(
                  decoration: InputDecoration(
                    labelText: 'password',
                    errorText: snapshot.error,
                  ),
                  obscureText: false,
                  onChanged: _registrationFormBloc.onPasswordChanged,
                );
              }),
          StreamBuilder<String>(
              stream: _registrationFormBloc.confirmPassword,
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
                return TextField(
                  decoration: InputDecoration(
                    labelText: 'retype password',
                    errorText: snapshot.error,
                  ),
                  obscureText: false,
                  onChanged: _registrationFormBloc.onRetypePasswordChanged,
                );
              }),
          StreamBuilder<bool>(
              stream: _registrationFormBloc.registerValid,
              builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
                return RaisedButton(
                  child: Text('Register'),
                  onPressed: (snapshot.hasData && snapshot.data == true)
                      ? () {
                          // launch the registration process
                        }
                      : null,
                );
              }),
        ],
      ),
    );
  }
}
复制代码

说明:

  • 因为 RegisterFormBloc 只是用于表单的验证处理，所以仅在表单组件中初始化(实例化)是合适的
  • 每个 TextField 都包含在一个StreamBuilder 中，以便能够响应验证过程的任何结果（见代码中的errorText：snapshot.error）
  • 每次 TextField 中输入的内容发生改变时，我们都将已输入的内容通过 onChanged:_registrationFormBloc.onEmailChanged (输入email情况下) 发送给 BLoC 进行验证，
  • RegisterButton 同样也包含在一个 StreamBuilder 中
    • 如果 _registrationFormBloc.registerValid 抛出了值，onPressed 将在用户点击时对抛出的值进行后续处理
    • 如果没有值抛出，onPressed 方法被指定为 null，按钮会被置为不可用状态

好了！可用看到在表单组件中，是看不到任何和业务规则相关的代码的，这意味着我们可以随意修改业务规则，而不需要对表单组件本身进行任何修改，简直 excellent!

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 _shoppingBasket = Set();


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


  // Stream to list the items part of the shopping basket
  BehaviorSubject<List> _shoppingBasketController = BehaviorSubject<List>(seedValue: []);
  Stream<List> 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.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(context);


    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        title: Text('Shopping Page'),
        actions: [
          ShoppingBasket(),
        ],
      ),
      body: Container(
        child: StreamBuilder<List>(
          stream: bloc.items,
          builder: (BuildContext context,
              AsyncSnapshot<List> 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>*中的
  • 每个商品对应一个 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> _shoppingBasketController = PublishSubject<List>();
  Function(List) 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
  • 监听 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(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. 这是到底是怎么运作的?

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

后记

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

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

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

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

--全文完--

你可能感兴趣的:([译]Flutter 响应式编程：Steams 和 BLoC 实践范例)

  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
  • 绘本讲师训练营【24期】8/21阅读原创《独生小孩》 1784e22615e0
    24016-孟娟《独生小孩》图片发自App今天我想分享一个蛮特别的绘本，讲的是一个特殊的群体，我也是属于这个群体，80后的独生小孩。这是一本中国绘本，作者郭婧，也是一个80厚。全书一百多页，均为铅笔绘制，虽然为黑白色调，但并不显得沉闷。全书没有文字，犹如“默片”，但并不影响读者对该作品的理解，反而显得神秘，梦幻，給读者留下想象的空间。作者在前蝴蝶页这样写到：“我更希望父母和孩子一起分享这本书，使他
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码 说私域 人工智能小程序
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
  • 消息中间件有哪些常见类型 xmh-sxh-1314 java
    消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • 本周第二次约练 2cfbdfe28a51
    中原焦点团队中24初26刘霞2021.12.3约练161次，分享第368天当事人虽然是带着问题来的，但是咨询过程中发现，她是经过自己不断地调整和努力才走到现在的，看到当事人的不容易，找到例外，发现资源，力量感也就随之而来。增强画面感，或者说重温，会给当事人带来更深刻的感受。
  • 放下是一段成长的修行 小莳玥
    人来到这个世界上，只有两件事：生和死。一件事已经做完了，另一件你还急什么呢?是人，都有七情六欲。是心，都有喜怒哀乐，这些再正常不过了。别总抱怨自己活得累，过得辛苦。永远记住：舒坦是留给死人的。苦，才是生活；累，才是工作；变，才是命运；忍，才是历练；容，才是智慧；静，才是修养；舍，才会得到；做，才会拥有。人生，活得太清楚，才是最大的不明白。有些事，看得很清，却说不清；有些人，了解很深，却猜不透；有些
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • 每日一题——第八十四题 互联网打工人no1 C语言程序设计每日一练c语言
    题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye
  • 网易严选官方旗舰店，优质商品，卓越服务 高省_飞智666600
    网易严选官方旗舰店是网易旗下的一家电商平台，以提供优质商品和卓越服务而闻名。作为一名SEO优化师，我将为您详细介绍网易严选官方旗舰店，并重点强调其特点和优势。大家好！我是高省APP最大团队&联合创始人飞智导师。相较于其他返利app，高省APP的佣金更高，模式更好，最重要的是，终端用户不会流失！高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几
  • python os.environ 江湖偌大 python深度学习
    os.environ['TF_CPP_MIN_LOG_LEVEL']='0'#默认值，输出所有信息os.environ['TF_CPP_MIN_LOG_LEVEL']='1'#屏蔽通知信息（INFO）os.environ['TF_CPP_MIN_LOG_LEVEL']='2'#屏蔽通知信息和警告信息（INFO\WARNING）os.environ['TF_CPP_MIN_LOG_LEVEL']='
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他