Flutter中如何实现TextField光标聚焦时边框变色

方法一：用TextField自带装饰属性（最省心的方案） #

TextField的InputDecoration自带了针对焦点状态的边框配置，直接设置focusedBorder和enabledBorder就能搞定，不需要额外写状态逻辑。

示例代码：

TextField(
  decoration: InputDecoration(
    // 未获焦（光标不在内部）时的边框样式
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.grey),
      borderRadius: BorderRadius.circular(8),
    ),
    // 获焦（光标在内部）时的边框样式
    focusedBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.blue, width: 2),
      borderRadius: BorderRadius.circular(8),
    ),
    hintText: "请输入内容",
  ),
)

当光标进入TextField（组件获焦）时，会自动切换到focusedBorder的样式；光标移出（失去焦点）时，回到enabledBorder的样式，完全匹配需求，代码简洁高效。

方法二：手动监听焦点状态（适合复杂场景） #

如果需要和其他业务逻辑联动（比如获焦时同时触发其他操作），可以用FocusNode手动监听焦点变化，动态修改边框颜色。

步骤实现： #

1. 在State类中定义焦点节点和颜色状态：

class _MyPageState extends State<MyPage> {
  late FocusNode _textFieldFocusNode;
  Color _borderColor = Colors.grey;

  @override
  void initState() {
    super.initState();
    _textFieldFocusNode = FocusNode();
    // 监听焦点变化
    _textFieldFocusNode.addListener(() {
      setState(() {
        // 根据是否获焦切换颜色
        _borderColor = _textFieldFocusNode.hasFocus ? Colors.orange : Colors.grey;
      });
    });
  }

  @override
  void dispose() {
    // 务必销毁焦点节点，避免内存泄漏
    _textFieldFocusNode.dispose();
    super.dispose();
  }

2. 在TextField中绑定焦点节点和动态颜色：

@override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: _textFieldFocusNode,
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderSide: BorderSide(color: _borderColor),
          borderRadius: BorderRadius.circular(8),
        ),
        hintText: "请输入内容",
      ),
    );
  }
}

这种方式可以灵活控制焦点变化时的逻辑，比如除了改边框颜色，还可以触发弹窗、请求数据等操作。

注意点： #

• 使用FocusNode必须在组件销毁时调用dispose()，否则会造成内存泄漏。
• 如果用OutlineInputBorder，建议保持不同状态下的圆角一致，避免切换时出现视觉跳动。

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