要正确地更新UI中的状态,您需要仔细检查以下几个方面:
以下是一个示例代码,在这个示例中,我们有一个Counter BLoC并尝试在触摸按钮时更新UI:
class CounterBloc extends Bloc {
int counter = 0;
@override
CounterState get initialState => CounterInitial();
@override
Stream mapEventToState(
CounterEvent event,
) async* {
if (event is IncrementEvent) {
counter++;
yield CounterLoaded(counter: counter);
}
}
}
class CounterScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter Demo'),
),
body: BlocBuilder(
builder: (context, state) {
if (state is CounterLoaded) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'${state.counter}',
style: TextStyle(fontSize: 50),
),
RaisedButton(
onPressed: () {
BlocProvider.of(context).add(IncrementEvent());
},
child: Text(
'Increment',
),
),
],
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
);
}
}
在这个示例中,Counter BLoC会在用户点击按钮时发出IncrementEvent事件,我们会使用emit方法将状态更改通知UI层。同时,UI层接收到事件时会调用setState()方法触发更新:
class CounterLoaded extends CounterState {
final int counter;
CounterLoaded({this.counter});
@override
List