Flutter中TextFormField焦点切换时背景颜色无法即时更新的问题

问题核心是FocusNode状态变化不会自动触发Widget重建，所以你的Container颜色无法同步更新。要解决这个问题，需要给FocusNode添加监听器，在焦点状态改变时主动调用setState()触发UI刷新。

完整修复代码 #

class YourWidget extends StatefulWidget {
  @override
  _YourWidgetState createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    // 绑定焦点状态监听
    _focusNode.addListener(() {
      setState(() {}); // 触发UI重建，更新颜色
    });
  }

  @override
  void dispose() {
    _focusNode.dispose(); // 释放资源，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: _focusNode.hasFocus ? Colors.red : Colors.black,
      child: TextFormField(
        focusNode: _focusNode,
      ),
    );
  }
}

关键说明 #

• 必须在initState阶段初始化FocusNode并绑定监听器，确保组件创建后就能监听焦点变化。
• 组件销毁时要在dispose中释放FocusNode，防止内存泄漏。
• 监听器里调用setState()会重新执行build方法，此时_focusNode.hasFocus的最新状态会生效，Container颜色就能同步切换。

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