flutter_bloc : 使 initialState 方法异步
flutter_bloc : Make initialState method async
我正在使用 flutter_bloc 包来管理我的应用程序中的状态。我有一个用例，我必须从远程数据库加载初始状态。这要求 initialState 方法是异步的，但事实并非如此。
如果不使用 initialState 方法，从远程数据库加载 Bloc 初始状态的最佳方法是什么？
您可以向 bloc 发送一个 event 以开始加载（在其上事件块发送新的 LoadingState），您会在其中接收并显示 Loader，然后当loading ended bloc 发送另一个带有数据的状态，您只需将加载状态切换为已加载（并显示数据）。 你不需要等待调用，你要做的只是推送和接收状态
另一个选项可能是，例如在配置文件中，您可以在其中进行依赖项注入，您可以等待那里的状态。然后该状态传入集团的构造函数。所以现在在 bloc 中，您可以轻松地将 initialState 指向您传入的那个。
是的，您必须记住，当数据准备就绪时，您应该更改初始状态。
现在我为这个场景提供一个用例。
您可能已经为用户显示了基本选项或设置。您从初始状态获得的简单数据。
然后下一个状态：加载状态例如可以显示背景具有某种不透明度的加载指示器。正在加载更多需要的数据时，用户已经可以看到基本选项。
综合解释：
flutter_bloc插件中Bloc的initialState必须同步.
因为在实例化 bloc 时必须有一个立即可用的初始状态。
所以，如果你想从异步源获得一个状态，你可以在mapEventToState函数中调用你的异步函数，并在你的工作完成了。
一般步骤：
步骤(1):
用你想要的事件和状态创建你自己的 Bloc class。
class YourBloc extends Bloc<YourEvent, YourState> {
@override
YourState get initialState => LoadingState();
@override
Stream<YourState> mapEventToState(YourEvent event) async* {
if (event is InitEvent) {
final data = await _getDataFrom_SharedPreferences_OR_Database_OR_anyAsyncSource();
yield LoadedState(data);
}
}
}
其中 LoadingState 和 LoadedState 可以是 YourState class 的子 class 或相同类型，并且可以具有不同的属性以便稍后在小部件中使用.
同样，InitEvent 和其他您的事件也吃掉了 YourEvent class 的子 class 或只是一个枚举。
步骤(2):
现在当你想创建 BlocProvider 小部件时，你可以立即添加 initEvent 如下所示：
BlocProvider<YourBloc>(
create: (_) => YourBloc()..add(InitEvent()),
child: YourChild(),
)
步骤(3):
使用不同的状态来显示不同的小部件：
BlocBuilder<YourBloc, YourState>(
builder: (context, state) {
if (state is LoadingState) {
return Center(child: CircularProgressIndicator(),);
}
if (state is LoadedState) {
return YourWidget(state.data);
}
}
)
实例：
请假设我们在购物应用程序 中为每个产品设置了一个 计数器 (+/-)，并且我们希望将选定的商品数量保存在 SharedPreferences 或 database（您可以使用任何异步数据源）。这样，无论何时用户打开应用程序，he/she 都可以看到所选项目的计数。
//our events:
enum CounterEvent {increment, decrement, init}
class YourBloc extends Bloc<CounterEvent, int>{
final Product product;
YourBloc(int initialState, this.product) : super(initialState);
@override
Stream<int> mapEventToState(CounterEvent event) async* {
int newState;
if(event == CounterEvent.init){
//get data from your async data source (database or shared preferences or etc.)
newState = data.count;
yield newState;
}
else if(event == CounterEvent.increment){
newState = state + 1;
saveNewState(newState);
yield newState;
}else if(event == CounterEvent.decrement && state > 0){
newState = state - 1;
saveNewState(newState);
yield newState;
}
}
void saveNewState(int count){
//save your new state in database or shared preferences or etc.
}
}
class ProductCounter extends StatelessWidget {
final Product product;
ProductCounter(this.product);
@override
Widget build(BuildContext context) {
return BlocProvider<YourBloc>(
//-1 is a fake initial (sync) value that is converted to progressbar in BlocBuilder
create: (context) => YourBloc(-1, product)..add(CounterEvent.init),
child: YourWidget()
);
}
}
class YourWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final _yourBloc = BlocProvider.of<YourBloc>(context);
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => _yourBloc.add(CounterEvent.increment),
),
BlocBuilder<ProductCounterBloc, int>(
builder: (BuildContext context, int state) {
if(state == -1){
return Center(child: CircularProgressIndicator(),);
}else {
return Container(
width: 24,
child: Text(
state > 0 ? state.toString().padLeft(2, "0") : "-",
textAlign: TextAlign.center,
),
);
}
}
),
FloatingActionButton(
child: const Icon(Icons.remove),
onPressed: () => _yourBloc.add(CounterEvent.decrement),
),
],
);
}
}
我正在使用 flutter_bloc 包来管理我的应用程序中的状态。我有一个用例，我必须从远程数据库加载初始状态。这要求 initialState 方法是异步的，但事实并非如此。
如果不使用 initialState 方法，从远程数据库加载 Bloc 初始状态的最佳方法是什么？
您可以向 bloc 发送一个 event 以开始加载（在其上事件块发送新的 LoadingState），您会在其中接收并显示 Loader，然后当loading ended bloc 发送另一个带有数据的状态，您只需将加载状态切换为已加载（并显示数据）。 你不需要等待调用，你要做的只是推送和接收状态
另一个选项可能是，例如在配置文件中，您可以在其中进行依赖项注入，您可以等待那里的状态。然后该状态传入集团的构造函数。所以现在在 bloc 中，您可以轻松地将 initialState 指向您传入的那个。
是的，您必须记住，当数据准备就绪时，您应该更改初始状态。
现在我为这个场景提供一个用例。 您可能已经为用户显示了基本选项或设置。您从初始状态获得的简单数据。 然后下一个状态：加载状态例如可以显示背景具有某种不透明度的加载指示器。正在加载更多需要的数据时，用户已经可以看到基本选项。
综合解释：
flutter_bloc插件中Bloc的initialState必须同步.
因为在实例化 bloc 时必须有一个立即可用的初始状态。
所以，如果你想从异步源获得一个状态，你可以在mapEventToState函数中调用你的异步函数，并在你的工作完成了。
一般步骤：
步骤(1):
用你想要的事件和状态创建你自己的 Bloc class。
class YourBloc extends Bloc<YourEvent, YourState> {
@override
YourState get initialState => LoadingState();
@override
Stream<YourState> mapEventToState(YourEvent event) async* {
if (event is InitEvent) {
final data = await _getDataFrom_SharedPreferences_OR_Database_OR_anyAsyncSource();
yield LoadedState(data);
}
}
}
其中 LoadingState 和 LoadedState 可以是 YourState class 的子 class 或相同类型，并且可以具有不同的属性以便稍后在小部件中使用.
同样，InitEvent 和其他您的事件也吃掉了 YourEvent class 的子 class 或只是一个枚举。
步骤(2):
现在当你想创建 BlocProvider 小部件时，你可以立即添加 initEvent 如下所示：
BlocProvider<YourBloc>(
create: (_) => YourBloc()..add(InitEvent()),
child: YourChild(),
)
步骤(3):
使用不同的状态来显示不同的小部件：
BlocBuilder<YourBloc, YourState>(
builder: (context, state) {
if (state is LoadingState) {
return Center(child: CircularProgressIndicator(),);
}
if (state is LoadedState) {
return YourWidget(state.data);
}
}
)
实例：
请假设我们在购物应用程序 中为每个产品设置了一个 计数器 (+/-)，并且我们希望将选定的商品数量保存在 SharedPreferences 或 database（您可以使用任何异步数据源）。这样，无论何时用户打开应用程序，he/she 都可以看到所选项目的计数。
//our events:
enum CounterEvent {increment, decrement, init}
class YourBloc extends Bloc<CounterEvent, int>{
final Product product;
YourBloc(int initialState, this.product) : super(initialState);
@override
Stream<int> mapEventToState(CounterEvent event) async* {
int newState;
if(event == CounterEvent.init){
//get data from your async data source (database or shared preferences or etc.)
newState = data.count;
yield newState;
}
else if(event == CounterEvent.increment){
newState = state + 1;
saveNewState(newState);
yield newState;
}else if(event == CounterEvent.decrement && state > 0){
newState = state - 1;
saveNewState(newState);
yield newState;
}
}
void saveNewState(int count){
//save your new state in database or shared preferences or etc.
}
}
class ProductCounter extends StatelessWidget {
final Product product;
ProductCounter(this.product);
@override
Widget build(BuildContext context) {
return BlocProvider<YourBloc>(
//-1 is a fake initial (sync) value that is converted to progressbar in BlocBuilder
create: (context) => YourBloc(-1, product)..add(CounterEvent.init),
child: YourWidget()
);
}
}
class YourWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final _yourBloc = BlocProvider.of<YourBloc>(context);
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => _yourBloc.add(CounterEvent.increment),
),
BlocBuilder<ProductCounterBloc, int>(
builder: (BuildContext context, int state) {
if(state == -1){
return Center(child: CircularProgressIndicator(),);
}else {
return Container(
width: 24,
child: Text(
state > 0 ? state.toString().padLeft(2, "0") : "-",
textAlign: TextAlign.center,
),
);
}
}
),
FloatingActionButton(
child: const Icon(Icons.remove),
onPressed: () => _yourBloc.add(CounterEvent.decrement),
),
],
);
}
}