在Bloc中,它是一个状态管理库,可以帮助我们在应用程序中管理状态。Bloc的状态是不可变的,这意味着它们在创建后不能更改。因此,Bloc不会产生两次相同的状态。
下面是一个简单的示例,演示了如何使用Bloc来管理状态:
首先,需要将flutter_bloc
库添加到项目的pubspec.yaml
文件中:
dependencies:
flutter_bloc: ^7.0.0
然后,创建一个简单的CounterBloc类,该类将继承自Bloc类,并定义了两个状态:初始状态和计数状态。在该类中,我们还定义了两个事件:增加计数和减少计数。
import 'package:flutter_bloc/flutter_bloc.dart';
class CounterBloc extends Bloc {
CounterBloc() : super(0);
@override
Stream mapEventToState(CounterEvent event) async* {
if (event is IncrementEvent) {
yield state + 1;
} else if (event is DecrementEvent) {
yield state - 1;
}
}
}
abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}
在这个例子中,我们使用了flutter_bloc
库中的Bloc
类,它提供了一个抽象类来定义Bloc的行为。CounterBloc
类继承自Bloc
,其中CounterEvent
是事件类型,int
是状态类型。
在CounterBloc
类中,我们定义了一个构造函数,它将初始状态设置为0。然后,我们覆盖了mapEventToState
方法,该方法将事件映射到状态的转换逻辑。
在这个例子中,我们定义了两个事件类型:IncrementEvent
和DecrementEvent
。当接收到IncrementEvent
时,我们将当前状态加1,并使用yield
关键字将新状态发送到流中。同样,当接收到DecrementEvent
时,我们将当前状态减1,并将新状态发送到流中。
接下来,我们可以在页面上使用CounterBloc
来管理状态。以下是一个简单的例子:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bloc Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BlocProvider(
create: (context) => CounterBloc(),
child: MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc counterBloc = BlocProvider.of(context);
return Scaffold(
appBar: AppBar(
title: Text('Bloc Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlocBuilder(
builder: (context, state) {
return Text(
'Count: $state',
style: TextStyle(fontSize: 24),
);
},
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
counterBloc.add(IncrementEvent());
},
child: Icon(Icons.add),
),
SizedBox(width: 16),
RaisedButton(
onPressed: () {
counterBloc.add(DecrementEvent());
},
child: Icon(Icons.remove),
),
],
),
],
),
),
);
}
}
在这个例子中,我们使用BlocProvider
提供了一个CounterBloc
实例,以便在整个应用程序中共享该实例。
在MyHomePage
小部件中,我们使用BlocBuilder
小部件来构建UI,它将订阅CounterBloc
的状态,并在状态更改时自动重建UI。
当用户点击“增加”按钮时,我们将IncrementEvent
添加到CounterBloc
中,CounterBloc
将接收到该事件,并将状态更新为
下一篇:Bloc被多次调用或未被调用。