Flutter如何实现TextField聚焦与非聚焦状态下使用不同的文字颜色

原配置不生效原因 #

focusColor属于InputDecoration的装饰属性，仅控制输入框获得焦点时的边框、图标、提示文本等装饰元素的高亮色，无法作用于用户输入的文本内容；直接给style写死固定颜色也不会跟随焦点状态自动切换，所以之前的方案无效。

实现思路 #

通过FocusNode监听TextField的焦点状态，动态修改文本样式的颜色参数即可实现需求。

具体实现步骤 #

• 第一步：定义所需变量

// 用于监听焦点状态
late final FocusNode textFieldFocus;
// 非焦点状态文字颜色
final Color unfocusedTextColor = const Color(0xffaa7420);
// 焦点状态文字颜色
final Color focusedTextColor = Colors.black;

• 第二步：初始化FocusNode并添加监听（StatefulWidget的initState生命周期中实现）

@override
void initState() {
  super.initState();
  textFieldFocus = FocusNode();
  // 焦点变化时触发刷新
  textFieldFocus.addListener(() => setState(() {}));
}

• 第三步：页面销毁时释放FocusNode，避免内存泄漏

@override
void dispose() {
  textFieldFocus.dispose();
  super.dispose();
}

• 第四步：给TextField绑定焦点监听并动态设置颜色

TextField(
  focusNode: textFieldFocus,
  style: TextStyle(
    // 根据焦点状态动态切换颜色
    color: textFieldFocus.hasFocus ? focusedTextColor : unfocusedTextColor,
    height: 1,
  ),
  // 其他自定义属性，比如InputDecoration等
  decoration: const InputDecoration(
    // 你的其他装饰配置
  ),
)

轻量优化方案（无需setState全局刷新） #

如果不想因为焦点切换触发整个页面刷新，可以用ValueNotifier局部更新样式：

// 定义焦点状态监听
final ValueNotifier<bool> isTextFieldFocused = ValueNotifier(false);
late final FocusNode textFieldFocus;

@override
void initState() {
  super.initState();
  textFieldFocus = FocusNode();
  textFieldFocus.addListener(() {
    isTextFieldFocused.value = textFieldFocus.hasFocus;
  });
}

@override
void dispose() {
  textFieldFocus.dispose();
  isTextFieldFocused.dispose();
  super.dispose();
}

// TextField配置
TextField(
  focusNode: textFieldFocus,
  style: ValueListenableBuilder<bool>(
    valueListenable: isTextFieldFocused,
    builder: (context, isFocused, _) => TextStyle(
      color: isFocused ? focusedTextColor : unfocusedTextColor,
      height: 1,
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Itai.S.