如何在flutter中通过BloC模式在页面的加载（初始）处设置两个不同的列表答案

【问题标题】：How to set two different lists at the load (initial) of the page by BloC pattern in the flutter如何在flutter中通过BloC模式在页面的加载（初始）处设置两个不同的列表
【发布时间】：2020-02-24 11:31:56
【问题描述】：

我的表单中有两个 DropDownList 列表，我使用 BloC 模式，我为需求中的一个事件产生 4 个状态_bloc.dart 页面。

  @override
  Stream<DemandAddState> mapEventToState(DemandAddEvent event) async* {
    if (event is InitListLoadEvent) {
      yield* _setInitListToState(event);
    }
  }

  Stream<DemandAddState> _setInitListToState(InitListLoadEvent event) async* {
    yield InitListLoading();
    try {

      List data = await demandAddRepository.getEmployeeList();
      yield EmployeeListLoaded(data: data);

      List data2 = await demandAddRepository.getDayOffList();
      yield DayOffListLoaded(data2: data2);

    } catch (_) {
      yield InitListError();
    }
  }

我的需求_state.dart是

class InitListLoading extends DemandAddState {}

class InitListError extends DemandAddState {}

class EmployeeListLoaded extends DemandAddState {
  final List data;

  const EmployeeListLoaded({@required this.data}) : assert(data != null);

}

class DayOffListLoaded extends DemandAddState {
  final List data2;

  const DayOffListLoaded({@required this.data2}) : assert(data2 != null);

}

之后，根据我的要求_page.dart，

我需要提供data、data2、

但不幸的是，数据变成了Null。

    body: BlocProvider<DemandAddBloc>(
      create: (context) {
        return DemandAddBloc(demandAddRepository: demandAddRepository)
          ..add(InitListLoadEvent());
      },
      child: BlocBuilder<DemandAddBloc, DemandAddState>(
        builder: (context, demandAddState) {
          if (demandAddState is InitListLoading) {
            return LoadingIndicator();
          }
          if (demandAddState is DayOffListLoaded) {
            data2 = demandAddState.data2;
          }
          if (demandAddState is EmployeeListLoaded) {
            data = demandAddState.data;
          }

          if (demandAddState is InitListError){ ... }


          return ...
          ListView(
              children: <Widget>[
                Form(
                  key: _formKey,
                  child: Column(

                    children: [

                       _buildDropDownFormField(data),

                       _buildDropDownFormField(data2),

                        ....

结束过程后我丢失了数据

【问题讨论】：

标签： flutter dart bloc

【解决方案1】：

这是因为 BLoC 一次只有 1 个状态。你可以做的是要么创建一个单独的 BLoC 来处理这两种状态，要么创建一个新的状态类。

class ListLoaded extends DemandAddState {
   final List<Employee> data;
   final List<DayOff> data2;
}

    body: BlocProvider<DemandAddBloc>(
      create: (context) {
        return DemandAddBloc(demandAddRepository: demandAddRepository)
          ..add(InitListLoadEvent());
      },
      child: BlocBuilder<DemandAddBloc, DemandAddState>(
        builder: (context, demandAddState) {
          if (demandAddState is InitListLoading) {
            return LoadingIndicator();
          }
          if (demandAddState is ListLoaded) {
            data = demandAddState.data;
            data2 = demandAddState.data2;

            return ...
            ListView(
                children: <Widget>[
                  Form(
                    key: _formKey,
                    child: Column(
                      children: [
                         _buildDropDownFormField(data),
                         _buildDropDownFormField(data2),
                       ....
          }
          if (demandAddState is InitListError){
            return ..
          }

【讨论】：

【解决方案2】：

我更改了我的 _state.dart

class InitListLoading extends DemandAddState {}

class InitListError extends DemandAddState {}

class InitListLoaded extends DemandAddState {
  final List data;
  final List data2;

  const InitListLoaded({@required this.data,  @required this.data2}) : assert(data != null, data2 != null);
}

还有我的 _page.dart

          ...
          if (demandAddState is InitListLoaded) {
            dataDayOffList = demandAddState.data2;
            dataEmployeeList = demandAddState.data;
          }
          ...

【讨论】：