如何在Flutter TextField中固定标签，使其始终可见？

你需要的是标签在输入框未聚焦时始终显示（包括填写内容后），聚焦输入框时自动隐藏的效果，当前代码里的FloatingLabelBehavior.never会让标签一直固定显示，无法满足聚焦隐藏的需求。可以通过FocusNode监听输入框的聚焦状态来实现，具体代码修改如下：

class YourWidgetState extends State<YourWidget> {
  late FocusNode _textFieldFocusNode;
  final String _text = "你的标签文本";

  @override
  void initState() {
    super.initState();
    _textFieldFocusNode = FocusNode();
    // 监听聚焦状态变化，触发UI重绘
    _textFieldFocusNode.addListener(() {
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: _textFieldFocusNode,
      decoration: InputDecoration(
        floatingLabelBehavior: FloatingLabelBehavior.never,
        // 根据聚焦状态动态显示/隐藏标签
        label: _textFieldFocusNode.hasFocus
            ? const SizedBox.shrink()
            : Align(
                alignment: Alignment.topLeft,
                child: Text(
                  _text,
                  textAlign: TextAlign.left,
                  style: const TextStyle(fontSize: 15),
                ),
              ),
        focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
    );
  }
}

关键说明 #

• FocusNode：用来监听输入框的聚焦状态，通过addListener在状态变化时调用setState触发UI重绘
• 动态标签：判断_textFieldFocusNode.hasFocus，聚焦时返回SizedBox.shrink()隐藏标签，未聚焦时显示原标签组件
• FloatingLabelBehavior.never：保持标签固定在左上角，不会出现浮动到输入框上方的默认行为

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