如何保持旧数据处于相同状态，同时使用不同数据发出相同状态，并在 UI 中使用不同的 blocBuilder 分别渲染它们

Question

我有一个名为specialityBloc 的块，它将根据医生的专业从firestore 中获取医生，并将其委托给存储库。

问题是当我想获取具有不同专业的不同医生并从同一状态（fetchSuccessState）发出它们时。

我可以从 firestore 中单独获取它们，但是当涉及到使用不同的块构建器（监听相同的specialityBloc）在 UI 中渲染时。它会覆盖旧数据（在第一个 Api 调用中）并将其替换为后续 api 调用的结果。

我想保留旧的状态并渲染它的 UI，并渲染它下面的新数据（从相同的状态发出）。

这是我的专业块

  SpecialityBloc() : super(InitialState()){
    on<GetSpeciality>((event, emit) async {
      emit(WaitingSpeciality());
      try{
        final data = await FirebaseRepo.getDoctorsBySpeciality(event.speciality);
        data.fold((l){
          emit(GetSpecialitySuccess(doctors:l));
        }, (r){
          
        });
      }catch(e){
        print(e);
      }
    });
  }
  
}

abstract class SpecialityState extends Equatable {

}

abstract class SpecialityEvent {

}

class InitialState extends SpecialityState {
@override
  List<Object> get props => [];
}

class WaitingSpeciality extends SpecialityState {
  @override
  List<Object> get props => [];

}

class GetSpecialitySuccess extends SpecialityState {
final List<DoctorModel> doctors;
GetSpecialitySuccess({required this.doctors});
@override
  List<Object> get props => [doctors];
}

class GetSpeciality extends SpecialityEvent {

  final String speciality;
  GetSpeciality(this.speciality);

}```

This is the UI part

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:patient_app/ui/screens/home/home_bloc/popular_bloc.dart';
import 'package:patient_app/ui/screens/home/home_bloc/speciality_bloc.dart';
import 'package:patient_app/ui/widgets/gridViewLoading.dart';
import 'package:shimmer/shimmer.dart';
import 'package:patient_app/ui/screens/home/home_bloc/home_bloc.dart';
import 'package:patient_app/ui/widgets/custom_carousel.dart';
import 'package:patient_app/ui/widgets/search_bar.dart';
import 'package:patient_app/ui/widgets/square.dart';
import 'package:patient_app/ui/widgets/username.dart';

class Home extends StatefulWidget {
  const Home({ Key? key }) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  @override
  void initState() {
    super.initState();

    context.read<HomeBloc>().add(GetUserInfo());
    context.read<PopularBloc>().add(GetPopularDoctors());
    context.read<SpecialityBloc>().add(GetSpeciality('paediatrics'));
    context.read<SpecialityBloc>().add(GetSpeciality('gynaecologist'));
  }

  @override
  Widget build(BuildContext context) {
    return   SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(left:20.0,right: 20,),
            child: Column(

              children: [
                const SizedBox(height: 35,),
                BlocBuilder<HomeBloc,HomeState>(
                  
                  builder: (ctx,state){
                    if(state is Waiting){
                      return Align(
                        alignment: Alignment.centerLeft,
                        child: Shimmer.fromColors(
                          baseColor: Colors.amber,
                          highlightColor: Colors.grey[300]!,
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Colors.amber,
                            ),
                            height: 20,width: 150,),
                        ));
                    }
                    if(state is Success){
                      return UserName(name: state.data.name!);
                    }
                    else{
                      return Container();
                    }
                    
                  },
                ),
                CustomCarousel(slides: [
                  SizedBox(
                    width: double.infinity,
                    child: Image.network("https://cdn.pixabay.com/photo/2020/09/13/20/24/doctor-5569298_960_720.png",fit: BoxFit.cover,),
                  ),
                  SizedBox(
                    width: double.infinity,
                    child: Image.network("https://cdn.pixabay.com/photo/2021/11/20/03/16/doctor-6810750_960_720.png",fit: BoxFit.cover,),
                  ),
                ]),
                const SearchBar(),
                
                BlocBuilder<PopularBloc,PopularState>(builder: (ctx,state){
                  if(state is WaitingPopular){
                    return const GridViewLoading();
                  }
                  if(state is PopularDoctorsSuccess){
                   
                    return Square(doctors: state.doctors,title: "Popular Doctors",);
                  }
                  return Container();
                }),
               
                
                BlocBuilder<SpecialityBloc,SpecialityState>(builder: (ctx,state){

                  if(state is WaitingSpeciality){
                    return const GridViewLoading();
                  }
                  if(state is GetSpecialitySuccess){
                    return Square(doctors: state.doctors,title: " Paediatrics",);
                  }
                  return Container();

                }),

                BlocBuilder<SpecialityBloc,SpecialityState>(builder: (ctx,state){

                  if(state is WaitingSpeciality){
                    return const GridViewLoading();
                  }
                  if(state is GetSpecialitySuccess){
                    return Square(doctors: state.doctors,title: "Gynaecologist",);
                  }
                  return Container();

                })
                
              ],
            ),
          ),
        );
  }
}

Answer 1

如果我没猜错的话，您是在尝试保存从 API 获得的旧结果以便稍后使用，对吧？
如果是这样那么：
你可以尝试让你的 var 成为一个全局变量，然后当数据到来时，你可以分配你在这个变量中获得的数据，以便稍后在类似的另一个状态中使用它

late final data;
//or the other way you can make data as a list here
//of the type object you are using ex Doctor or so..



SpecialityBloc() : super(InitialState()){
    on<GetSpeciality>((event, emit) async {
      emit(WaitingSpeciality());
      try{
        data = await FirebaseRepo.getDoctorsBySpeciality(event.speciality);
        data.fold((l){
          emit(GetSpecialitySuccess(doctors:l));
        }, (r){
          
        });
      }catch(e){
        print(e);
      }
    });
  }
// now you can use your data variable that has the info with any other state or with whatever you want 

，每次只需将它们添加到你的列表中，然后你就可以得到返回到列表中您想要的任何对象，例如使用某个 ID 搜索医生，如果它不在列表中，您可以获取它并将其再次添加到列表中，在这里您可以使用相同的状态来渲染不同的对象，还尝试从代码中删除 equatable 并如果您确实不需要它，请尝试不使用它。

Answer 2

如果我做对了，最简单和正确的方法是让不同的事件为每个专业返回不同的状态，同时作用于 UI 上的相同或不同的构建器；基于块构建器的 buildWhen 方法。在内部，您可以编写一个可重用的方法来执行 API 查询，每次使用不同的事件（特殊）触发它，并且它可以根据方法调用者发出相应的状态。

优点：更好地控制 UI 和更好的可测试性。