9

我正在使用 flutter_bloc 包来管理我的应用程序中的状态。我有一个用例，我必须从远程数据库加载初始状态。这要求 initialState 方法是异步的，但事实并非如此。

如果不使用 initialState 方法，从远程数据库加载 Bloc 初始状态的最佳方法是什么？

4

3 回答 3

14

综合解释：

插件中initialState的必须是sync 。 因为当 bloc 被实例化时，必须有一个立即可用的初始状态。Blocflutter_bloc

因此，如果您想从异步源获得状态，您可以在函数内部调用异步函数，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);
    }
  }
}

whereLoadingState和LoadedState可以是YourState类或相同类型的子类，并且可以具有不同的属性以供以后在小部件中使用。同样，InitEvent您的其他事件也吃了类的子YourEvent类或只是一个枚举。

步骤（2）：
 现在当你想创建BlocProvider小部件时，你可以立即添加initEvent如下：

BlocProvider<YourBloc>(
  create: (_) => YourBloc()..add(InitEvent()),
  child: YourChild(),
)

step(3)：
 使用不同的状态来展示不同的widget：

BlocBuilder<YourBloc, YourState>(
  builder: (context, state) {
    if (state is LoadingState) {
      return Center(child: CircularProgressIndicator(),);
    }
    if (state is LoadedState) {
      return YourWidget(state.data);
    }
  }
)

实际示例：
请假设我们在购物应用程序中为每个产品都有一个计数器 (+/-)，并且我们希望将选定的项目计数保存在SharedPreferencesor中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),
        ),
      ],
    );
  }


}
于 2020-08-10T11:30:42.350 回答
7

您可以发送一个event到您接收和显示的bloc开始加载（事件块发送新） ，然后在加载结束时发送另一个带有数据的状态，您只需将加载状态切换为已加载（并显示数据）。你不需要 await call，你要做的只是推送和接收状态LoadingStateLoaderbloc

于 2020-02-24T06:37:49.517 回答
0

另一种选择可能是，例如在您有依赖注入的配置文件中，您可以在那里等待状态。然后该状态传入集团的构造函数。因此，现在在该集团中，您可以轻松地将 指向initialState您传入的那个。

是的，您必须记住，当您的数据准备就绪时，您应该更改初始状态。

现在我为这个场景提供一个用例。您可能已经为用户显示了基本选项或设置。您从初始状态获得的简单数据。然后是下一个状态：加载状态例如可以显示加载指示器，哪个背景具有某种不透明度。在加载更多需要的数据时，用户已经可以看到基本选项。

于 2020-05-05T13:36:14.043 回答