首页 > 解决方案 > 如何在键盘关闭之前根据 LoginInputField 更新屏幕?

问题描述

我有一个带有电子邮件和密码 LoginInputField 的简单登录屏幕。当字段为空时,登录按钮显示为灰色并禁用。当它们都包含文本时,按钮已启用。我有什么作品,但在用户关闭键盘之前它不会更新。我希望用户能够单击按钮而无需先关闭键盘。

我在 LoginInputFields 上有 TextEdditingControllers,并在构建期间检查控制器的状态并进行相应设置。

class LoginState extends State<Login> {

    final emailController = TextEditingController();
    final passwordController = TextEditingController();
    ButtonStyle loginButtonStyle;
    bool loginDisabled = true;

    void setLoginButtonStyle(){
      if(emailController.text != '' && passwordController.text != ''){
        setState(() {
          this.loginButtonStyle = buttonPrimary;
        });
        loginDisabled = false;
      } else {
        this.loginButtonStyle = buttonDisabled;
        loginDisabled = true;
      }
    }

  @override
  Widget build(BuildContext context) {
  setLoginButtonStyle();
  //build widgets
  RoundedButton(
    buttonText: 'Log In',
    buttonStyle: loginButtonStyle,
    onPressed: () {
                    if (!loginDisabled){
                      //login through server
                    } 
                  },
    ),
    //more widgets
  }

标签: dartflutter

解决方案


你应该倾听你TextEditingController的每一个变化。

     @override
    void initState() {
      emailController.addListener(setLoginButtonStyle);
      passwordController.addListener(setLoginButtonStyle);
      super.initState();
    }

    @override
    void dispose() {
      emailController.dispose();
      passwordController.dispose();
      super.dispose();
    }

    void setLoginButtonStyle(){
  if(emailController.text != '' && passwordController.text != ''){
    this.loginButtonStyle = buttonPrimary;
    loginDisabled = false;
  } else {
    this.loginButtonStyle = buttonDisabled;
    loginDisabled = true;
  }

   setState(() {
    });
  }

您也可以删除此行 setLoginButtonStyle(); 从你的build方法


推荐阅读