Flutter 阻塞:使initialState方法异步

eoxn13cs  于 2022-12-19  发布在  Flutter
关注(0)|答案(3)|浏览(132)

我正在使用flutter_bloc包来管理应用中的状态。我有一个用例,需要从远程数据库加载初始状态。这要求initialState方法是异步的,但实际上不是。
如果不使用initialState方法,从远程DB加载Bloc的初始状态的最佳方法是什么?

krcsximq

krcsximq1#

综合说明:

flutter_bloc插件BlocinitialState必须同步
因为当块被示例化时必须有立即可用的初始状态。
因此,如果您希望从异步源获得一个状态,您可以在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);
    }
  }
}

其中,LoadingStateLoadedState可以是YourState类的子类,也可以是相同类型,并且可以具有不同的属性,以便稍后在小部件中使用。类似地,InitEvent和其他事件也可以是YourEvent类的子类,或者只是一个枚举。

**步骤(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);
    }
  }
)

示例:

请假设我们有一个计数器(+/-)为每个产品在购物应用程序,我们想保存所选的项目计数在SharedPreferencesdatabase(您可以使用任何异步数据源).以便每当用户打开应用程序,他/她可以看到所选的项目计数.

//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),
        ),
      ],
    );
  }

}
nzk0hqpo

nzk0hqpo2#

使用两个states(即loadingloaded)代替async
说明:

  • 您可以向bloc发送一个event以开始加载(在其事件块上发送新的LoadingState),您将在其中接收并显示Loader
  • 一旦加载结束,bloc发送另一个带有数据的状态,您只需将加载状态切换为已加载(并显示数据)。
    • 您无需等待呼叫**,您只需推送和接收状态
vqlkdk9b

vqlkdk9b3#

另一种选择是,例如在配置文件中,你可以在那里等待一个状态,然后那个状态传入块的构造函数,所以现在在块中,你可以很容易地将initialState指向你传入的那个。
是的,您必须记住,当您的数据准备就绪时,您应该更改初始状态。
现在我提供了一个这个场景的用例。你可能已经为用户显示了基本的选项或设置。这些简单的数据是从初始状态获得的。然后是下一个状态:例如,加载状态可以显示加载指示器,其背景具有某种不透明性。用户可以在加载更多所需数据时看到基本选项。

相关问题