Flutter Angular风格状态管理插件angular_bloc的使用

插件简介

angular_bloc 是一个Dart包，它帮助在 AngularDart 中实现BLoC模式，并与bloc 包配合工作。更多详情请访问 bloclibrary.dev。

主要特性

• BlocPipe: 一个Angular管道，用于将BLoC的状态变化绑定到视图层。
• Cubit 和 Bloc 的使用：通过简单的例子展示如何使用Cubit和Bloc来管理应用状态。

安装与配置

在 pubspec.yaml 文件中添加依赖：

dependencies:
  angular: ^6.0.0
  angular_bloc: ^2.0.0

运行命令以获取依赖项：

flutter pub get

使用示例

Counter 应用案例

1. 创建 Cubit 或 Bloc

Cubit 实现 - counter_cubit.dart

import 'package:bloc/bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

Bloc 实现 - counter_bloc.dart

import 'package:bloc/bloc.dart';

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterDecrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
    on<CounterDecrementPressed>((event, emit) => emit(state - 1));
  }

  @override
  void onTransition(Transition<CounterEvent, int> transition) {
    super.onTransition(transition);
    print(transition);
  }
}

2. 创建组件

组件 Dart 文件 - counter_page_component.dart

import 'package:angular/angular.dart';
import 'package:angular_bloc/angular_bloc.dart';
import './counter_cubit.dart'; // 或者 counter_bloc.dart

@Component(
  selector: 'counter-page',
  templateUrl: 'counter_page_component.html',
  pipes: [BlocPipe],
)
class CounterPageComponent implements OnInit, OnDestroy {
  late final CounterCubit counterCubit; // 或者 CounterBloc counterBloc;

  @override
  void ngOnInit() {
    counterCubit = CounterCubit();
    // 如果是 Bloc，则为 counterBloc = CounterBloc();
  }

  @override
  void ngOnDestroy() {
    counterCubit.close();
    // 如果是 Bloc，则为 counterBloc.close();
  }

  void increment() => counterCubit.increment();
  // 如果是 Bloc，则为 counterBloc.add(CounterIncrementPressed());

  void decrement() => counterCubit.decrement();
  // 如果是 Bloc，则为 counterBloc.add(CounterDecrementPressed());
}

组件 HTML 文件 - counter_page_component.html

<div>
  <h1>Counter App</h1>
  <h2>Current Count: {{ $pipe.bloc(counterCubit) }}</h2>
  <!-- 如果是 Bloc，则为 {{ $pipe.bloc(counterBloc) }} -->
  <button (click)="increment()">+</button>
  <button (click)="decrement()">-</button>
</div>

完整示例代码

// example/example.dart

import 'package:angular_bloc/angular_bloc.dart';
import 'package:ngdart/angular.dart';

@Component(
  selector: 'my-app',
  template: '<counter-page></counter-page>',
  directives: [CounterPageComponent],
)
class AppComponent {}

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterDecrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
    on<CounterDecrementPressed>((event, emit) => emit(state - 1));
  }

  @override
  void onTransition(Transition<CounterEvent, int> transition) {
    super.onTransition(transition);
    print(transition);
  }
}

const String template =
    r'''<div><h1>Counter App</h1><h2>Current Count: {{ $pipe.bloc(counterBloc) }}</h2><button (click)="increment()">+</button><button (click)="decrement()">-</button></div>''';

@Component(
  selector: 'counter-page',
  pipes: [BlocPipe],
  template: template,
)
class CounterPageComponent implements OnInit, OnDestroy {
  late final CounterBloc counterBloc;

  @override
  void ngOnInit() {
    counterBloc = CounterBloc();
  }

  @override
  void ngOnDestroy() {
    counterBloc.close();
  }

  void increment() => counterBloc.add(CounterIncrementPressed());

  void decrement() => counterBloc.add(CounterDecrementPressed());
}

通过上述代码，您可以快速上手 angular_bloc 插件，并将其应用于自己的项目中。希望这个指南对您有所帮助！如果有任何问题或需要进一步的帮助，请随时联系我。