Bloc登录示例：表单提交按钮状态联动逻辑解析

这个示例里按钮的启用/禁用逻辑，是Formz输入验证 + Bloc状态监听结合实现的，核心逻辑藏在这几个地方：

• 输入项的验证规则：
  项目里的邮箱（Email）和密码（Password）都是FormzInput的子类，各自在validator方法里定义了非空验证：

  • 邮箱类（lib/models/email.dart）：如果输入为空，返回EmailValidationError.empty，此时email.isValid为false；
  • 密码类（lib/models/password.dart）：如果输入为空，返回PasswordValidationError.empty，此时password.isValid为false。

• 登录状态的有效性判断：
  在LoginState（lib/bloc/login_state.dart）里，有一个isValid的getter方法，直接判断两个输入项是否都验证通过：

  bool get isValid => email.isValid && password.isValid;
  

  只有当邮箱和密码都通过验证（也就是都不为空，且邮箱格式合法），这个值才会是true。

• UI层的状态监听：
  在登录页面（lib/login_view.dart）的BlocBuilder里，提交按钮的onPressed属性是根据state.isValid来设置的：

  • 如果state.isValid为true，就绑定触发登录的事件；
  • 如果为false，就设为null——Flutter里按钮的onPressed为null时，会自动处于禁用状态。

这样就形成了“输入内容变化→触发Bloc更新输入状态→计算isValid→UI更新按钮状态”的完整链路，所以只有两个输入框都填写（且邮箱格式合法）时，按钮才会启用。

内容的提问来源于stack exchange，提问作者LAW