Flutter中如何固定TextEditingController输入框的标签文本在顶部

要实现标签固定在顶部、聚焦时整体背景变色的效果，你可以通过FocusNode监听聚焦状态+外层容器控制背景的方式来实现，避开默认TextField的浮动标签逻辑，具体代码如下：

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

  @override
  State<FixedLabelTextField> createState() => _FixedLabelTextFieldState();
}

class _FixedLabelTextFieldState extends State<FixedLabelTextField> {
  final TextEditingController _controller = TextEditingController();
  final FocusNode _focusNode = FocusNode();

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

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose(); // 务必释放FocusNode，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 根据聚焦状态切换背景色
      color: _focusNode.hasFocus ? Colors.grey.shade100 : Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          // 固定在顶部的标签文本
          const Text(
            '用户名',
            style: TextStyle(fontSize: 14, color: Colors.grey),
          ),
          const SizedBox(height: 8),
          // 不带浮动标签的输入框
          TextField(
            controller: _controller,
            focusNode: _focusNode,
            decoration: const InputDecoration(
              hintText: '请输入用户名',
              border: OutlineInputBorder(),
              // 不要设置labelText，避免默认浮动效果
            ),
          ),
        ],
      ),
    );
  }
}

关键说明： #

• FocusNode：用来监听输入框的聚焦/失焦状态，通过addListener触发setState更新背景色
• 外层Container：把标签和输入框包裹起来，统一控制背景色，避免标签单独跟着输入框变色的问题
• TextField配置：去掉labelText，改用独立的Text组件作为固定标签，彻底避开默认的浮动标签逻辑

这样不管输入框有没有内容、是否聚焦，标签都会固定在顶部，且聚焦时整个容器的背景色会切换。

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