我正在使用flutter_bloc包来管理应用中的状态。我有一个用例,需要从远程数据库加载初始状态。这要求initialState方法是异步的,但实际上不是。如果不使用initialState方法,从远程DB加载Bloc的初始状态的最佳方法是什么?
krcsximq1#
综合说明:
flutter_bloc插件中Bloc的initialState必须同步。因为当块被示例化时必须有立即可用的初始状态。因此,如果您希望从异步源获得一个状态,您可以在mapEventToState函数内部调用异步函数,并在工作完成时发出一个新状态。
flutter_bloc
Bloc
initialState
mapEventToState
**一般步骤:**步骤(1):
使用所需的事件和状态创建自己的Bloc类。
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类的子类,也可以是相同类型,并且可以具有不同的属性,以便稍后在小部件中使用。类似地,InitEvent和其他事件也可以是YourEvent类的子类,或者只是一个枚举。
LoadingState
LoadedState
YourState
InitEvent
YourEvent
**步骤(2):**现在,当您想要创建BlocProvider小部件时,您可以立即添加initEvent,如下所示:
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(您可以使用任何异步数据源).以便每当用户打开应用程序,他/她可以看到所选的项目计数.
SharedPreferences
database
//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), ), ], ); } }
nzk0hqpo2#
使用两个states(即loading和loaded)代替async说明:
states
loading
loaded
async
bloc
event
Loader
vqlkdk9b3#
另一种选择是,例如在配置文件中,你可以在那里等待一个状态,然后那个状态传入块的构造函数,所以现在在块中,你可以很容易地将initialState指向你传入的那个。是的,您必须记住,当您的数据准备就绪时,您应该更改初始状态。现在我提供了一个这个场景的用例。你可能已经为用户显示了基本的选项或设置。这些简单的数据是从初始状态获得的。然后是下一个状态:例如,加载状态可以显示加载指示器,其背景具有某种不透明性。用户可以在加载更多所需数据时看到基本选项。
3条答案
按热度按时间krcsximq1#
综合说明:
flutter_bloc
插件中Bloc
的initialState
必须同步。因为当块被示例化时必须有立即可用的初始状态。
因此,如果您希望从异步源获得一个状态,您可以在
mapEventToState
函数内部调用异步函数,并在工作完成时发出一个新状态。**一般步骤:**步骤(1):
使用所需的事件和状态创建自己的Bloc类。
其中,
LoadingState
和LoadedState
可以是YourState
类的子类,也可以是相同类型,并且可以具有不同的属性,以便稍后在小部件中使用。类似地,InitEvent
和其他事件也可以是YourEvent
类的子类,或者只是一个枚举。**步骤(2):**现在,当您想要创建
BlocProvider
小部件时,您可以立即添加initEvent
,如下所示:**步骤(3):**使用不同的状态显示不同的小工具:
示例:
请假设我们有一个计数器(+/-)为每个产品在购物应用程序,我们想保存所选的项目计数在
SharedPreferences
或database
(您可以使用任何异步数据源).以便每当用户打开应用程序,他/她可以看到所选的项目计数.nzk0hqpo2#
使用两个
states
(即loading
和loaded
)代替async
说明:
bloc
发送一个event
以开始加载(在其事件块上发送新的LoadingState
),您将在其中接收并显示Loader
,bloc
发送另一个带有数据的状态,您只需将加载状态切换为已加载(并显示数据)。vqlkdk9b3#
另一种选择是,例如在配置文件中,你可以在那里等待一个状态,然后那个状态传入块的构造函数,所以现在在块中,你可以很容易地将
initialState
指向你传入的那个。是的,您必须记住,当您的数据准备就绪时,您应该更改初始状态。
现在我提供了一个这个场景的用例。你可能已经为用户显示了基本的选项或设置。这些简单的数据是从初始状态获得的。然后是下一个状态:例如,加载状态可以显示加载指示器,其背景具有某种不透明性。用户可以在加载更多所需数据时看到基本选项。