Flutter中如何监听TextField焦点状态并触发Container边框颜色变化？

这完全不是Flutter禁止的操作哦！你遇到的问题核心是焦点变化时没有触发UI重建，导致Container的边框颜色不会自动更新。下面是两种可行的解决方案：

方案一：手动监听FocusNode的焦点变化 #

你的代码逻辑本身是对的，但缺少了焦点变化的监听——Flutter不会自动因为FocusNode状态改变而重建Widget，所以需要我们手动触发setState()。

首先在你的State类中正确初始化并监听FocusNode：

late FocusNode _myFocusNode;

@override
void initState() {
  super.initState();
  _myFocusNode = FocusNode();
  // 添加焦点变化监听，触发UI刷新
  _myFocusNode.addListener(() {
    setState(() {});
  });
}

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

然后保留你原来的Container代码即可，现在当TextField获焦/失焦时，_myFocusNode.hasFocus的状态变化会通过setState()触发UI重建，边框颜色就会随之改变了。

方案二：使用Focus Widget包裹Container #

如果你不想手动管理FocusNode，也可以用Flutter提供的Focus Widget来实现，它会自动处理焦点状态的监听：

Focus(
  onFocusChange: (hasFocus) {
    // 焦点变化时触发UI刷新
    setState(() {});
  },
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(
        // 通过Focus.of(context)获取当前焦点状态
        color: Focus.of(context).hasFocus ? Colors.black38 : Colors.blue,
        width: 2,
      ),
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Icon(
            Icons.alternate_email_rounded,
            color: Colors.black38,
          ),
        ),
        Flexible(
          child: TextField(
            autofocus: true,
            style: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
            ),
            cursorHeight: 24,
            cursorColor: Colors.grey,
            decoration: const InputDecoration(
              border: InputBorder.none,
              suffixIcon: SizedBox(height: 24, width: 24),
              hintText: 'Input your email',
              hintStyle: TextStyle(color: Colors.black38),
            ),
          ),
        ),
      ],
    ),
  ),
)

两种方案的核心都是在焦点状态变化时调用setState()触发UI重建，这样Container的边框颜色就能正确响应TextField的焦点状态了。

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