颤动，两个不同的文本字段具有相同的值

Question

我正在 Flutter 上进行注册和登录页面。 因为我知道我会使用多个文本字段，所以我制作了一个小部件功能来按需创建一个。像这样：

  Widget buildInput({bool obscureText, icon, labelText, Function change}) {
Color borderCo = HexColor('#88d5cb');

return Container(
  padding: EdgeInsets.only(top: 35, left: 20, right: 20),
  child: Column(
    children: <Widget>[
      TextField(
        onChanged: change,
        obscureText: obscureText,
        decoration: InputDecoration(
          prefixIcon: Icon(icon),
            border: UnderlineInputBorder(
                borderSide: BorderSide(color: borderCo)),
            focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey)),
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: borderCo)),
            labelText: labelText,
            labelStyle: TextStyle(
              fontFamily: 'Arial',
              fontWeight: FontWeight.bold,
              color: Colors.grey,
            )
        ),
      )
    ],
  )
);

所以每次我需要输入时，我都会这样称呼它

buildInput(
        obscureText: false, 
        icon: Icons.mail, 
        labelText:'EMAIL', 
        change: (login) => setState(() => _loginEmail = login)
      ),

问题是我有一个带有两个按钮的屏幕，一个用于登录，一个用于注册，而默认选择登录按钮，并且默认显示登录小部件。 如果用户想要注册，他点击正确的按钮并渲染我为注册制作的其他小部件功能。 这是 loginWidget 函数：

Widget loginWidget(size) {
return Container(
  child: Column(
    children: <Widget>[
      buildInput(
        obscureText: false, 
        icon: Icons.mail, 
        labelText:'EMAIL', 
        change: (login) => setState(() => _loginEmail = login)
      ),
      buildInput(
        obscureText:true, 
        icon:Icons.lock, 
        labelText:'PASSWORD',
        change: (login) => setState(() => _loginPassword = login)
      ),
      SizedBox(height: 15,),
      SizedBox(
        width: MediaQuery.of(context).size.width * 0.9,
        child: RaisedButton(
          disabledColor: Colors.grey[300],
          elevation: 8,
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 10),
            child: Text(
              'LOGIN',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: HexColor('#88d5cb')),
            ),
          ),
          color: Colors.white,
          shape: RoundedRectangleBorder(
            side: BorderSide(color: HexColor('#88d5cb')),
            borderRadius: BorderRadius.circular(10.0),
          ),
          onPressed: (EmailValidator.validate(_loginEmail) && _loginPassword.length >= 6) ?() async {
              try {
                Dialogs.showLoadingSpinner(context);
                bool isLoggedIn = await HttpServices.login(emailPass: { 
                  'email': _loginEmail, 
                  'password': _loginPassword 
                });

                if(isLoggedIn) { 
                  Dialogs.hideLoadingSpinner(context);
                  Navigator.of(context).pushReplacement(
                    MaterialPageRoute(
                      builder: (BuildContext context) => CollabityHome()
                    )
                  );
                } else {
                  Dialogs.hideLoadingSpinner(context);
                  // Dialogs.showAlert(context, 'Email or password incorrect, try again.');
                  setState(() {
                    err = "The email or password you've entered doesn't match any account.";
                  });
                  print(err);
                }
              } catch(ex) {
                print('login ex: $ex');
              }
            }
            :
            null
        )
      ),
    ],
  )
);

}

我的大问题是，当我在登录的电子邮件输入中输入某些内容时，然后单击注册按钮以查看注册小部件功能，注册的输入具有登录输入的值与他们在屏幕上出现的位置相匹配。

这就是我在为登录和注册构建的小部件之间切换的方式

swap? loginWidget(size) : signupWidget(size),

按钮使用 setstate() 更改交换的布尔值。

Answer 1

我建议您为每个输入创建一个TextEditingController，以便可以将其作为参数传递给您的buildInput() 函数。这样可以更轻松地处理值而不会混淆。