[英]How to add multiple state in one cubit in flutter bloc pattern?
我正在 flutter 中开发一个应用程序,该应用程序执行基于 OTP 的身份验证以登录。之前我正在管理 class 本身的状态,以便我可以使用 setState 方法相应地呈现 UI。 然后我改成flutter_bloc cubit模式来管理状态。 但我不明白如何在一肘内跟踪多个状态。
考虑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,
},
),
);
});
}
}
在这里,最初,我将 map 中的两个值都设置为 false。 当用户点击按钮时, isPhoneSubmitted
设置为 true。 几秒钟后, isOtpArrived
变为真(在获得 OTP 后的未来)。 但是,我认为这不是实现该模式的正确方法。 考虑如果我在 class 中有 10 个属性,并且每次调用 emit 方法时我都会发送 10 个属性的 map。
有人可以帮助我理解或实施最佳实践来保持/更新 Cubit 正在收听的小部件的多个状态吗?
此外,在小部件中,这就是我收听更改的方式,
BlocBuilder<LoginCubit, LoginState>(builder: (context, state) {
final data = (state as LoginInitial).loginState;
if (!data["isPhoneSubmitted"]) {
return phoneNumberSubmitWidget();
} else {
return codeVerificationWidget();
}
}),
但是,我认为这不是实现该模式的正确方法。
你是对的。 复杂 state 开关的第一步是不使用Cubit
而是使用实际Bloc
。 Cubits 用于非常简单的数据,基本上没有 state 流逻辑。 像一个int。 或者也许是 DarkTheme/LightTheme 开关。 或者也许是一种语言,它只能是一种,而且只能是一种。
但是你有一个复杂的流程。 具有“中间”状态。 因此,请使用Bloc
并阅读有关此的教程,在这种情况下可能是登录教程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.