Flutter封装公共TextFormField时如何分别绑定邮箱、密码控制器

你只需要给封装的buildInputForm方法新增一个TextEditingController类型的入参，调用时分别传入对应的控制器即可，修改后的代码如下：

// 定义两个对应控制器
TextEditingController emailController = TextEditingController();
TextEditingController passController = TextEditingController();

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // 调用公共方法时传入对应控制器
      buildInputForm('Email', false, emailController),
      buildInputForm('Password', true, passController),
    ],
  );
}

// 给公共方法新增controller入参
Padding buildInputForm(String label, bool isPass, TextEditingController controller) {
  return Padding(
    padding: EdgeInsets.symmetric(vertical: 5),
    child: TextFormField(
      // 绑定传入的控制器
      controller: controller,
      obscureText: isPass ? _isObscure : false,
      decoration: InputDecoration(
          labelText: label,
          labelStyle: TextStyle(
            color: kTextFieldColor,
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: kPrimaryColor),
          ),
          suffixIcon: isPass
              ? IconButton(
                  onPressed: () {
                    setState(() {
                      _isObscure = !_isObscure;
                    });
                  },
                  icon: _isObscure
                      ? Icon(
                          Icons.visibility_off,
                          color: kTextFieldColor,
                        )
                      : Icon(
                          Icons.visibility,
                          color: kPrimaryColor,
                        ),
                )
              : null),
    ),
  );
}

// 页面销毁时释放控制器，避免内存泄漏
@override
void dispose() {
  emailController.dispose();
  passController.dispose();
  super.dispose();
}

后续需要获取输入内容时，直接调用emailController.text、passController.text即可拿到两个输入框的对应值，传给后端接口存入数据库即可。

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