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

Question

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

  @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),

                        ....

结束进程后我丢失了数据

Answer 1

那是因为 BLoC 一次只有 1 个状态。您可以做的是创建一个单独的 BLoC 来处理这两个状态或创建一个新状态 class.

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 ..
          }

Answer 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;
          }
          ...

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

How to set two different lists at the load (initial) of the page by BloC pattern in the flutter

dart

flutter

bloc