Flutter中CustomPasswordField的TextEditingController不更新问题排查与解决

核心原因 #

你实现的CustomPasswordField组件中，内部的TextField没有绑定外部传入的textEditingController参数，导致TextField的输入内容完全不会同步到SignUpScreen中创建的控制器里，所以控制器的text属性始终为空字符串。

另外还有一个不符合Flutter规范的问题：直接修改StatefulWidget的isObscured成员变量（widget.isObscured = !widget.isObscured），StatefulWidget的属性应该是不可变的，这类可变状态应该交由对应的State类来管理。

修复步骤 #

1. 给TextField绑定controller #

在CustomPasswordField的TextField中添加controller: widget.textEditingController参数，让TextField和外部传入的控制器建立关联。

2. 将isObscured状态移到State类中 #

把isObscured从CustomPasswordField（StatefulWidget）移到_CustomPasswordFieldState里，通过State来管理这个可变状态，避免直接修改widget的属性。

修改后的代码 #

custom_passwordfield.dart #

import 'package:flutter/material.dart';

import '../global_variables/global_variables.dart';

class CustomPasswordField extends StatefulWidget {
  CustomPasswordField({
    Key? key,
    required this.width,
    required this.height,
    required this.textEditingController,
    required this.hintText,
    required this.initialObscured, // 改为传入初始状态，而非可变属性
    required this.onChanged,
  }) : super(key: key);

  final double width;
  final double height;
  final TextEditingController textEditingController;
  final String hintText;
  final bool initialObscured; // 不可变的初始值
  final Function(String)? onChanged;

  @override
  State<CustomPasswordField> createState() => _CustomPasswordFieldState();
}

class _CustomPasswordFieldState extends State<CustomPasswordField> {
  late bool _isObscured; // 由State管理的可变状态

  @override
  void initState() {
    super.initState();
    _isObscured = widget.initialObscured; // 从widget获取初始值
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.grey,
          width: 0.25,
        ),
        borderRadius: const BorderRadius.all(Radius.circular(10)),
      ),
      child: Padding(
        padding: EdgeInsets.only(
          left: widget.width * 0.05,
          right: widget.width * 0.05,
        ),
        child: TextField(
          controller: widget.textEditingController, // 绑定外部传入的控制器
          cursorColor: Colors.grey,
          obscureText: _isObscured, // 使用State管理的状态
          onChanged: widget.onChanged,
          style: globalTextStyle.copyWith(
              color: Colors.grey, fontSize: widget.width * 0.04),
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: widget.hintText,
            hintStyle: globalTextStyle.copyWith(
                color: Colors.grey, fontSize: widget.width * 0.04),
            suffixIcon: IconButton(
              onPressed: () {
                setState(() {
                  _isObscured = !_isObscured; // 修改State内的状态
                });
              },
              icon: (_isObscured)
                  ? Icon(
                      Icons.visibility_outlined,
                      color: Colors.grey,
                      size: widget.width * 0.04,
                    )
                  : Icon(
                      Icons.visibility_off_rounded,
                      color: Colors.grey,
                      size: widget.width * 0.04,
                    ),
            ),
          ),
        ),
      ),
    );
  }
}

修改SignUpScreen中CustomPasswordField的调用 #

把原来的isObscured参数改为initialObscured：

// 第一个密码输入框
CustomPasswordField(
  width: screenWidth * 0.8,
  height: screenWidth * 0.8 / 6.8,
  textEditingController: _passwordController,
  hintText: "Password",
  initialObscured: true, // 改为initialObscured
  onChanged: (p0) {
    setState(() {
      password = p0;
      getPasswordStatus(password);
      print(
          "$passwordStatus, $passwordStrength, ${_passwordController.text}, $password");
    });
  },
),

// 确认密码输入框
CustomPasswordField(
  width: screenWidth * 0.8,
  height: screenWidth * 0.8 / 6.8,
  textEditingController: _confirmPasswordController,
  hintText: "Confirm password",
  initialObscured: true, // 改为initialObscured
  onChanged: (p0) {
    setState(() {
      confirmPassword = p0;
      passwordsMatch =
          doPasswordsMatch(confirmPassword, password);
      passwordsMatchStatus = (passwordsMatch)
          ? "Passwords match"
          : "Passwords do not match";
      print(
          "$p0, ${_passwordController.text}, $confirmPassword, $password, $passwordsMatchStatus, $passwordsMatch");
    });
  },
),

额外优化建议 #

你在SignUpScreen的build方法中定义了很多状态变量（比如passwordStatus、passwordStrength等），每次setState都会重新执行build方法，这些变量会被重新初始化。建议把这些状态变量移到_SignUpScreenState的成员变量中，避免重复初始化：

class _SignUpScreenState extends State<SignUpScreen> {
  String passwordStatus = "Weak Password";
  int passwordStrength = 1;
  bool passwordsMatch = false;
  String passwordsMatchStatus = "Passwords do not match";
  String password = "";
  String confirmPassword = "";

  @override
  Widget build(BuildContext context) {
    double? screenWidth = MediaQuery.of(context).size.width;
    double? screenHeight = MediaQuery.of(context).size.height;

    // ... 原有build逻辑，移除这些变量的定义
  }

  // ... 原有方法不变
}

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