如何在获取焦点时更改TextFormField的背景颜色？

你的代码里focusColor属性并不是用来控制输入框填充背景色的，它负责的是光标、文本选择等聚焦相关元素的颜色，所以点击输入框后背景色不会变化。要实现聚焦时切换背景色，需要通过监听输入框的聚焦状态动态设置fillColor，具体修改如下：

修改后的完整代码 #

class TextFieldWidget extends StatefulWidget {
  final TextEditingController controller;
  final bool isEmail;
  const TextFieldWidget({
    Key? key,
    required this.controller,
    required this.isEmail,
  }) : super(key: key);

  @override
  State<TextFieldWidget> createState() => _TextFieldWidgetState();
}

class _TextFieldWidgetState extends State<TextFieldWidget> {
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    // 监听聚焦状态变化，触发UI更新
    _focusNode.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    _focusNode.dispose(); // 销毁FocusNode，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      focusNode: _focusNode, // 关联自定义的FocusNode
      keyboardType: widget.isEmail ? TextInputType.emailAddress : TextInputType.text,
      obscureText: !widget.isEmail,
      controller: widget.controller,
      decoration: InputDecoration(
        hintText: widget.isEmail ? 'Enter your email' : 'Enter your password',
        filled: true,
        // 根据聚焦状态动态切换填充色
        fillColor: _focusNode.hasFocus ? Colors.white : const Color(0xffefefef),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5)),
        prefixIcon: Icon(
          widget.isEmail ? Icons.email : Icons.lock,
          color: const Color(0xFF1273EB),
        ),
      ),
      validator: (value) {
        if (widget.isEmail) {
          if (value!.isEmpty) {
            return 'Email can\'t be empty';
          } else if (!value.contains('@')) {
            return 'Please enter a valid email address';
          }
        } else {
          if (value!.isEmpty) {
            return 'Password can\'t be empty';
          } else if (value.length < 6) {
            return 'Password must be at least 6 characters long';
          }
        }
        return null;
      },
    );
  }
}

关键修改点 #

• 将StatelessWidget改为StatefulWidget，因为需要维护聚焦状态的变化
• 创建FocusNode并监听其状态变化，状态改变时调用setState()触发UI更新
• 动态设置fillColor：当_focusNode.hasFocus为true（聚焦状态）时用白色，否则用#EFEFEF
• 在dispose()中销毁FocusNode，避免内存泄漏

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