如何比较状态或从状态获取数据或使用 flutter bloc cubit 的状态？

Question

我是 flutter BloC 的新手，我对它的状态用法感到困惑。从计数器应用程序，我构建了另一个基本应用程序以根据其状态显示不同的小部件。但不知道该怎么做。

肘：

part 'home_bloc_state.dart';

class HomeBlocCubit extends Cubit<HomeBlocState> {
  HomeBlocCubit() : super(HomeBlocInitial());


  void showHome() {
    emit(HomeBlocInitial());
  }

  void showStudents() {
    emit(HomeBlocStudents());
  }


}

//状态

part of 'home_bloc_cubit.dart';


@immutable
abstract class HomeBlocState {}

class HomeBlocInitial extends HomeBlocState {}
class HomeBlocStudents extends HomeBlocState {}

使用按钮小部件我可以 add/toggle 事件：

final myBloc = BlocProvider.of<HomeBlocCubit>(context);

 return Container(
  child: ElevatedButton(
        onPressed: () { 
          myBloc.showHome(); 
        }, 
        child: Text('Home'),
      ), )

要在 UI 上显示事件，我想 return 基于状态的文本小部件。

@override
  Widget build(BuildContext context) {
    return Container(child: Align(child:
        BlocBuilder<HomeBlocCubit, HomeBlocState>(
            builder: (context, state) {
              //do something based on state.
              //How to check or compare or get data from this state?
              switch (state) {
                case   HomeBlocState: //error, - how to use?
                  break;
              }
      return Text(
        "Welcome to this page: " + state.toString(),
        style: TextStyle(
            fontSize: 60 ),
      );
    })));
  }

如何根据状态显示UI？

Answer 1

您可以通过调用

检查state是否处于所需状态

if (state is HomeBlocState) {
  ...
}

如果您更喜欢开关：

switch (state.runtimeType) {
  case HomeBlocInitial:
    return const HomeInitial();
  default:
    // probably throw
    return const SizedBox();
}

一种更成熟的方法（如果您擅长代码生成）是对状态使用 freezed。在这种情况下，您的州将声明为：

@freezed
class HomeBlocState with _$Failfast{
  const factory HomeBlocState.initial() = _Initial;
  const factory HomeBlocState.students() = _Students;
}

在 BlocBuilder 内，您将拥有：

return state.map(
  initial: (initialState) => ...,
  students: (studentsState) => ...,
);

Answer 2

你可以这样做：

if(state is HomeBlocInitial){
  return MyInitWidget();
} else if( state is HomeBlocStudents){
  return StudentsWidget();
} else {
  return SomethingWentWrongWidget();
}

一个很好的例子，看看这个：https://bloclibrary.dev/#/recipesfluttershowsnackbar?id=ui-layer

如何比较状态或从状态获取数据或使用 flutter bloc cubit 的状态？

How to compare state or get data from state or use state of flutter bloc cubit?

flutter

bloc