Flutter中InputDecorator的FloatingLabelBehavior.auto不生效问题

问题原因 #

直接用TextFormField(label: Text('Email'))时，TextFormField内部会自动关联输入框的焦点、内容状态，触发标签浮动逻辑。但嵌套InputDecorator后，两者的装饰逻辑冲突：

• TextFormField自带的输入装饰会被外层InputDecorator覆盖
• InputDecorator无法感知TextFormField的焦点变化和内容状态，自然不会触发标签浮动

解决方案 #

方案一：直接在TextFormField的decoration中配置（推荐）

不需要额外嵌套InputDecorator，把所有装饰属性直接放在TextFormField的decoration里，既保留标签浮动功能，又实现需求：

Widget build(BuildContext context) {
  return TextFormField(
    obscureText: obscureText,
    decoration: InputDecoration(
      label: const Text('Email'),
      floatingLabelBehavior: FloatingLabelBehavior.auto,
      suffixIcon: IconButton(
        onPressed: toggleVisibility,
        icon: Icon(obscureText ? Icons.visibility_off : Icons.visibility),
      ),
    ),
  );
}

方案二：手动同步状态给InputDecorator（不推荐）

如果一定要用InputDecorator，需要手动监听TextFormField的焦点和内容变化，同步给InputDecorator的isFocused和isEmpty属性：

final _focusNode = FocusNode();
final _controller = TextEditingController();

@override
void initState() {
  super.initState();
  // 监听焦点变化
  _focusNode.addListener(() => setState(() {}));
  // 监听内容变化
  _controller.addListener(() => setState(() {}));
}

@override
void dispose() {
  _focusNode.dispose();
  _controller.dispose();
  super.dispose();
}

Widget build(BuildContext context) {
  return InputDecorator(
    decoration: InputDecoration(
      label: const Text('Email'),
      floatingLabelBehavior: FloatingLabelBehavior.auto,
      suffixIcon: IconButton(
        onPressed: toggleVisibility,
        icon: Icon(obscureText ? Icons.visibility_off : Icons.visibility),
      ),
    ),
    isFocused: _focusNode.hasFocus,
    isEmpty: _controller.text.isEmpty,
    child: TextFormField(
      focusNode: _focusNode,
      controller: _controller,
      obscureText: obscureText,
      decoration: const InputDecoration(border: InputBorder.none), // 去掉自带边框避免重复装饰
    ),
  );
}

总结 #

方案一简洁高效，符合Flutter的设计逻辑，优先使用；方案二需要额外维护状态，代码冗余，仅在特殊场景下考虑。

内容的提问来源于stack exchange，提问作者erwin-lovecraft