Flutter中FocusNode控制Text文本颜色不生效问题排查

为啥会这样？ #

你现在的代码里，虽然把emailText这个FocusNode绑到了TextFormField上，但FocusNode的hasFocus状态变了之后，不会自动触发setState()，所以UI不会重新构建，那上面的"Email"文本颜色就一直是初始的黑色，不会跟着焦点变化。

两种解决办法 #

办法1：给FocusNode加监听 #

在initState里给FocusNode加个监听，焦点一变就调用setState()刷新UI，还要记得在dispose里清理监听和资源：

@override
void initState() {
  super.initState();
  // 监听焦点变化，触发UI更新
  emailText.addListener(() {
    setState(() {});
  });
}

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

办法2：用Focus组件（更省心） #

Flutter自带的Focus组件可以直接在builder里拿到当前焦点状态，不用手动管监听，代码更干净：

把Email那一块的Column换成下面的代码：

Focus(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Email',
        style: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 16.0,
          color: Focus.of(context).hasFocus ? Colors.blue : Colors.black,
          fontFamily: "Graphik",
        ),
      ),
      SizedBox(height: 8.0),
      TextFormField(
        controller: emailInput,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          border: OutlineInputBorder(),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey)
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.blue)
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
          ),
          focusedErrorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red)
          ),
          hintText: 'Enter your email',
          errorText: _isEmail ? null : "Email must not be empty",
        ),
      )
    ],
  ),
)

这样TextFormField焦点变化时，Focus.of(context).hasFocus会自动更新，builder会重新构建，文本颜色也就跟着变了。

额外提醒 #

一定要在dispose方法里释放TextEditingController和FocusNode的资源，不然容易内存泄漏，这是开发的基本操作。

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