Flutter中如何实现焦点节点（Focus Node）与颜色切换功能？

以下代码实现了设计图中的输入框效果，同时通过FocusNode管理焦点状态，实现焦点获取/失去时的颜色切换：

import 'package:flutter/material.dart';

class FocusColorInput extends StatefulWidget {
  const FocusColorInput({super.key});

  @override
  State<FocusColorInput> createState() => _FocusColorInputState();
}

class _FocusColorInputState extends State<FocusColorInput> {
  late FocusNode _focusNode;
  Color _borderColor = Colors.grey;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    // 监听焦点变化事件
    _focusNode.addListener(() {
      setState(() {
        // 根据焦点状态切换边框颜色
        _borderColor = _focusNode.hasFocus ? Colors.blue : Colors.grey;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('焦点颜色切换示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          focusNode: _focusNode,
          decoration: InputDecoration(
            labelText: '请输入内容',
            // 未获取焦点时的边框样式
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: _borderColor),
              borderRadius: BorderRadius.circular(8.0),
            ),
            // 获取焦点时的边框样式
            focusedBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: Colors.blue, width: 2.0),
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
            ),
            hintText: '输入示例文本',
            contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          ),
        ),
      ),
    );
  }
}

核心功能说明 #

• 焦点管理：通过FocusNode监听输入框的焦点状态变化，在initState中初始化并绑定监听事件
• 颜色切换：焦点获取时将边框颜色切换为蓝色，失去焦点时恢复为灰色，通过setState触发UI更新
• 内存优化：在组件销毁时调用dispose()释放FocusNode，防止内存泄漏
• 样式匹配：通过OutlineInputBorder自定义输入框边框，圆角和内边距可根据设计需求调整

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