前言
在之前的文章中,我们详细介绍了 Flutter
应用中的状态管理, StatefulWidget
和 setState
的使用,以及 Provider
库的使用。
本篇我们继续介绍另一个实现状态管理的方式:Bloc
。
一、Bloc介绍
定义
Bloc
是一种基于流(Stream
)的状态管理架构模式,它将应用程序的状态与事件(也称为操作)分离开来。
通过 Bloc
,开发者可以将业务逻辑与 UI
层分离,从而使代码更易于维护和扩展。
组成部分
Bloc
通常由事件(Event
)、状态(State
)和业务逻辑(Bloc
)三个主要部分组成。
事件表示用户的操作或外部输入,状态表示应用程序的当前情况,而业务逻辑则负责处理事件并更新状态。
优缺点
优点:
(1)代码重用性:Bloc
允许开发者将业务逻辑组件化,使得这些组件可以在不同的应用程序中重用。
(2)分离关注点:Bloc
通过将业务逻辑与UI层分离,使得应用程序的架构更加清晰。
(3)可测试性:由于 Bloc
的业务逻辑与 UI
层分离,因此可以更容易地编写单元测试来验证业务逻辑的正确性。
(4)响应式编程:Bloc
基于流(Stream
)的概念,实现了响应式编程。
(5)清晰的状态管理:支 Bloc
通过明确的事件和状态来管理应用程序的状态,使得状态的变化更加可预测和可控。
缺点:
(1)学习成本:学习 Bloc
需要一定的时间成本,因为 Bloc
引入了新的概念和工具,如流(Stream
)、事件(Event
)和状态(State
)等,需要开发者去理解和掌握。
(2)增加代码量:使用 Bloc
可能会增加项目的代码量。因为需要将业务逻辑从 UI
层中分离出来,并编写额外的 Bloc
类来处理这些逻辑。
(3)性能考虑:在处理大量数据或复杂业务逻辑时,Bloc
的性能可能会受到一定影响。这是因为 Bloc
基于流来处理数据,而流的处理可能会引入额外的性能开销。(但在大多数情况下,这种性能影响是可以接受的)。
(4)过度使用可能导致复杂性增加:果过度使用 Bloc
,可能会导致应用程序的架构变得过于复杂。
(5)依赖管理:使用 Bloc
可能需要管理额外的依赖库,如 flutter_bloc
等。
二、Bloc的使用
实现Bloc常用的库有两个,分别如下:
从图片可以得知,使用量最高的库是 flutter_bloc
库。
flutter_bloc
库其实是对 bloc
库的进一步封装,它引入了 bloc
库和 provider
库,是对 bloc
的进一步延伸。接下来主要分享的是flutter_bloc的使用。
1.安装依赖
dependencies:
flutter:
sdk: flutter
flutter_bloc: ^8.1.6
2.定义Event和State
Event
表示可能触发 Bloc
状态变化的输入事件,而 State
表示 Bloc
的当前状态。
// events.dart
import 'package:meta/meta.dart';
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}
以上代码我们定义了一个 CounterEvent
抽象类,它本身不能直接被实例化,但可以作为其他类的基类。
这个抽象类在 Flutter
应用中可以有多种用途,特别是在处理状态管理和事件驱动逻辑时。
同时创建了两个事件子类并继承 CounterEvent
抽象类。
// states.dart
class CounterState {
final int count;
CounterState({required this.count});
// 通常,我们会为State类添加一个copyWith方法来方便创建新的状态实例
CounterState copyWith({required int count}) {
return CounterState(count: count);
}
}
CounterState
:这个方法允许你基于当前状态对象创建一个新的状态对象,但只修改 count
字段的值。
这是通过在方法内部调用 CounterState
的构造函数并传入新的 count
值来实现的。
3.创建Bloc类
Bloc
类是一个处理事件并根据它们来更新状态的类。
需要创建一个继承自 Bloc
(或 Cubit
,如果你只需要管理状态而不需要处理事件)的类,并实现必要的方法。
代码如下(示例):
// counter_bloc.dart
import 'dart:async';
import 'package:bloc/bloc.dart';
// 引入刚刚创建的事件和状态
import 'events.dart';
import 'states.dart';
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(CounterState(count: 0)) {
on<Increment>(
(event, emit) => emit(state.copyWith(count: state.count + 1)));
on<Decrement>(
(event, emit) => emit(state.copyWith(count: state.count - 1)));
}
}
以上代码定义了一个名为 CounterBloc
的类,它继承自 Bloc
类。
Bloc
类是一个泛型类,它需要两个类型参数:Event
和 State
。
在这个例子中,CounterBloc
处理的是 CounterEvent
类型的事件,并维护 CounterState
类型的状态。
CounterBloc() : super(CounterState(count: 0))
这是 CounterBloc
的构造函数。
它通过调用父类 Bloc
的构造函数,并传入一个初始的 CounterState
实例(其中count
的初始值为0)来初始化状态。
然后,在构造函数的大括号{}中,定义了如何处理不同类型的事件。
on<Increment>((event, emit) => emit(state.copyWith(count: state.count + 1)))
这行代码使用 on
方法注册了一个事件处理器,用于处理 Increment
类型的事件。
当 Increment
事件被触发时,事件处理器会被调用,并接收到事件实例和一个 emit
函数作为参数。
emit
函数用于发送新的状态给 Bloc
的订阅者。
这里,它使用state.copyWith(count: state.count + 1)
来创建一个新的 CounterState
实例,其中 count
的值增加了1,然后通过 emit
函数发送这个新状态。
on<Decrement>((event, emit) => emit(state.copyWith(count: state.count - 1)));
代码和上面的类似。
4.在UI层使用Bloc
在你的 Flutter
应用中,你可以使用 BlocProvider
来提供 Bloc
实例,并使用 BlocBuilder
或 BlocConsumer
来监听状态变化并更新UI。
// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_demo/events.dart';
import 'package:flutter_demo/states.dart';
import 'counter_bloc.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: BlocProvider(
create: (context) => CounterBloc(),
child: CounterPage(),
),
);
}
}
class CounterPage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter App')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) {
return Text('Count: ${state.count}',
style: TextStyle(fontSize: 24));
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Increment()),
child: Icon(Icons.add),
),
SizedBox(width: 20),
FloatingActionButton(
onPressed: () => context.read<CounterBloc>().add(Decrement()),
child: Icon(Icons.remove),
),
],
),
],
),
),
);
}
}
以上是一个简单的计数器应用,效果如下:
总结
在这个例子中,我们创建了一个简单的计数器应用,它展示了如何在 Flutter
中使用 Bloc
进行状态管理。
我们定义了 CounterEvent
和 CounterState
来分别表示事件和状态,然后创建了一个 CounterBloc
来处理这些事件并发出新的状态。
最后,在 UI
层,我们使用 BlocProvider
来提供 Bloc
实例,并使用 BlocBuilder
来监听状态变化并更新 UI
。
– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。