如何在 flutter bloc pattern 中的一肘中添加多个状态？

Question

我正在用 flutter 开发一个应用程序，它进行基于 OTP 的身份验证来登录。早些时候我在 class 本身管理状态，以便我可以使用 setState 方法来呈现 UI 因此。然后我变成了flutter_bloc尺格来管理状态。但我不明白，如何在一肘内跟踪多个状态。

考虑下面State和Cubit的代码，


**State**.

@immutable
abstract class LoginState {}

class LoginInitial extends LoginState {
  final Map loginState;
  LoginInitial({this.loginState});
}

**Cubit**
class LoginCubit extends Cubit<LoginState> {
  Map loginState = {
    "isPhoneSubmitted": false,
    "isOtpArrived": false,
  };
  LoginCubit()
      : super(
          LoginInitial(
            loginState: {
              "isPhoneSubmitted": false,
              "isOtpArrived": false,
            },
          ),
        );

  void sendOtp() {
    emit(
      LoginInitial(
        loginState: {
          "isPhoneSubmitted": true,
          "isOtpArrived": false,
        },
      ),
    );
    Future.delayed(Duration(seconds: 4), () {
      emit(
        LoginInitial(
          loginState: {
            "isPhoneSubmitted": true,
            "isOtpArrived": true,
          },
        ),
      );
    });
  }
}

在这里，最初，我将地图中的两个值都设置为 false。当用户单击按钮时，将 isPhoneSubmitted 设置为 true。几秒钟后 isOtpArrived 为真（将来在获得 OTP 后）。但是，我认为这不是实现该模式的正确方法。考虑如果我在 class 中有 10 个属性，并且每次调用 emit 方法时我都发送一个包含 10 个属性的映射。

有人可以帮助我理解或实施最佳实践以 hold/update Cubit 正在收听的小部件的多个状态吗？

此外，在小部件中，这就是我收听更改的方式，

 BlocBuilder<LoginCubit, LoginState>(builder: (context, state) {
                final data = (state as LoginInitial).loginState;
                if (!data["isPhoneSubmitted"]) {
                  return phoneNumberSubmitWidget();
                } else {
                  return codeVerificationWidget();
                }
              }),

Answer 1

However, I don't think this is the right approach to implement the pattern.

你是对的。复杂状态切换的第一步是不使用 Cubit，而是使用实际的 Bloc。 Cubits 用于非常简单的数据，基本上根本没有状态流逻辑。像一个整数。或者可能是 DarkTheme/LightTheme 开关。或者也许是语言，它只能是一种，而且是一种。

但是您的流程很复杂。具有“中间”状态。所以使用 Bloc 并阅读教程，在这种情况下可能是 login tutorial.

如何在 flutter bloc pattern 中的一肘中添加多个状态？

How to add multiple state in one cubit in flutter bloc pattern?

dart

flutter

flutter-bloc

cubit