如何让Flutter TextField的长标签自动换行且不溢出？

方法一：分离标签与TextField布局（最稳妥） #

直接将标签文本作为独立组件放在TextField上方，完全规避InputDecoration的布局限制，标签可自由换行，且不会覆盖输入内容：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 自定义换行标签
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: Text(
        '这是一个非常非常长的标签文本，用来测试自动换行效果，确保不会溢出屏幕也不会遮挡输入内容',
        softWrap: true,
        maxLines: null,
        // 匹配默认label样式，保持UI一致性
        style: Theme.of(context).inputDecorationTheme.labelStyle ??
            const TextStyle(fontSize: 16, color: Colors.grey),
      ),
    ),
    const SizedBox(height: 8),
    TextField(
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
      ),
    ),
  ],
)

方法二：自定义InputDecoration.label并动态调整内边距 #

如果希望保留InputDecoration的整体结构，可使用label属性搭配可换行的Text组件，同时通过动态计算标签高度调整contentPadding，避免输入区域被覆盖：

class WrappingLabelTextField extends StatefulWidget {
  final String labelText;
  final TextEditingController? controller;

  const WrappingLabelTextField({
    super.key,
    required this.labelText,
    this.controller,
  });

  @override
  State<WrappingLabelTextField> createState() => _WrappingLabelTextFieldState();
}

class _WrappingLabelTextFieldState extends State<WrappingLabelTextField> {
  final GlobalKey _labelKey = GlobalKey();
  double _labelHeight = 0;

  @override
  void initState() {
    super.initState();
    // 组件渲染完成后计算标签高度
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderBox = _labelKey.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        setState(() {
          _labelHeight = renderBox.size.height;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: widget.controller,
      decoration: InputDecoration(
        label: Text(
          widget.labelText,
          key: _labelKey,
          softWrap: true,
          maxLines: null,
        ),
        // 关闭浮动标签，让标签固定在顶部
        floatingLabelBehavior: FloatingLabelBehavior.never,
        // 根据标签高度设置顶部内边距，预留足够空间
        contentPadding: EdgeInsets.fromLTRB(12, _labelHeight + 16, 12, 12),
        border: const OutlineInputBorder(),
      ),
    );
  }
}

方法三：固定顶部内边距（适合标签高度可预估场景） #

如果标签文本长度变化不大，可直接设置固定的contentPadding.top值，快速实现需求：

TextField(
  decoration: InputDecoration(
    label: const Text(
      '这是一个较长的标签文本，测试自动换行效果',
      softWrap: true,
      maxLines: null,
    ),
    floatingLabelBehavior: FloatingLabelBehavior.never,
    // 根据标签预估高度设置顶部内边距
    contentPadding: const EdgeInsets.fromLTRB(12, 60, 12, 12),
    border: const OutlineInputBorder(),
  ),
)

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