Flutter抽离TextFormField公共方法后如何为各输入框独立绑定控制器

将TextFormField抽离为公共buildTextField方法后，无法为每个独立输入框分别配置TextEditingController。如果直接在公共方法内绑定同一个控制器，会出现任意输入框输入内容时，所有输入框同步显示相同内容的异常。
原有代码存在两处核心缺失：

• 注册页buildSignupSection调用公共输入框构建方法时，没有传入独立的控制器实例
• 抽离的buildTextField方法没有预留控制器入参，无法给内部的TextFormField绑定独立控制器

TextEditingController和输入框是一一绑定的关系，一个控制器实例只能对应一个输入框，只要给公共构建方法增加控制器入参，调用时为每个输入框传入提前初始化好的独立控制器实例，就能解决内容同步联动的问题。

1. 页面内初始化独立控制器 #

在注册页的状态类中，为每个输入框定义专属控制器，在initState生命周期初始化，dispose生命周期释放，避免内存泄漏：

class _SignupPageState extends State<SignupPage> {
  final _signUpFormKey = GlobalKey<FormState>();
  // 为四个输入框分别定义独立控制器
  late final TextEditingController _nameController;
  late final TextEditingController _emailController;
  late final TextEditingController _passwordController;
  late final TextEditingController _confirmPwdController;

  @override
  void initState() {
    super.initState();
    // 初始化所有控制器
    _nameController = TextEditingController();
    _emailController = TextEditingController();
    _passwordController = TextEditingController();
    _confirmPwdController = TextEditingController();
  }

  @override
  void dispose() {
    // 页面销毁时释放控制器资源
    _nameController.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    _confirmPwdController.dispose();
    super.dispose();
  }

  // 其余原有代码保持不变
}

2. 修改公共buildTextField方法 #

给方法新增TextEditingController类型的必传入参，将传入的控制器绑定到内部的TextFormField上：

Widget buildTextField(
  String hintText,
  String labelText,
  bool isName,
  bool isPassword,
  bool isEmail,
  TextEditingController controller, // 新增控制器参数
) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 10.0),
    child: Column(
      children: [
        TextFormField(
          controller: controller, // 绑定传入的独立控制器
          autocorrect: !isPassword,
          obscureText: isPassword,
          keyboardType: isEmail ? TextInputType.emailAddress : TextInputType.text,
          decoration: InputDecoration(
            hintText: hintText,
            labelText: labelText,
            // 原有输入框装饰、校验逻辑等保持不变即可
          ),
        ),
      ],
    ),
  );
}

3. 调用公共方法时传入对应控制器 #

修改buildSignupSection中每个buildTextField的调用，传入对应输入框的专属控制器：

Container buildSignupSection() {
  return Container(
    margin: EdgeInsets.only(top: 30),
    child: Form(
      key: _signUpFormKey,
      child: Column(
        children: [
          buildTextField(
            "xpresschop",
            "Name",
            true,
            false,
            false,
            _nameController,
          ),
          buildTextField(
            "example@gmail.com",
            "email",
            false,
            false,
            true,
            _emailController,
          ),
          buildTextField(
            "......",
            "password",
            false,
            true,
            false,
            _passwordController,
          ),
          buildTextField(
            "......",
            "Confirm password",
            false,
            true,
            false,
            _confirmPwdController,
          ),
        ],
      ),
    ),
  );
}

后续需要获取输入内容时，直接读取对应控制器的.text属性即可，例如获取姓名输入内容用_nameController.text，禁止多个输入框共用同一个控制器实例。

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