如何创建多行占位符TextField？聚焦时光标重叠问题求助

问题现象 #

设置为多行模式（maxLines>1）的TextField，聚焦后光标会与浮动的标签文本重叠，单行模式下无此问题。

问题代码 #

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: question.fieldType == "textarea" ? 4 : 1,
  decoration: InputDecoration(label: Text('${question.fieldLabel}')),
)

问题截图说明 #

• 未聚焦状态：标签在输入框内部正常显示
• 聚焦状态：光标与顶部浮动的标签文本重叠

解决方案 #

方案1：改用hintText（无需浮动标签） #

如果不需要标签浮动的交互效果，直接使用hintText替代label，避免布局冲突：

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: question.fieldType == "textarea" ? 4 : 1,
  decoration: InputDecoration(hintText: '${question.fieldLabel}'),
)

方案2：固定输入框高度并调整标签行为 #

保留浮动标签的同时，通过设置minLines与maxLines一致固定输入框高度，配合floatingLabelBehavior让标签始终处于顶部，避免重叠：

TextField(
  keyboardType: TextInputType.multiline,
  minLines: question.fieldType == "textarea" ? 4 : 1,
  maxLines: question.fieldType == "textarea" ? 4 : 1,
  decoration: InputDecoration(
    label: Text('${question.fieldLabel}'),
    floatingLabelBehavior: FloatingLabelBehavior.always,
  ),
)

方案3：调整内边距与标签样式 #

通过contentPadding增加输入区域的垂直间距，同时调整labelStyle的行高，让标签与光标拉开距离：

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: question.fieldType == "textarea" ? 4 : 1,
  decoration: InputDecoration(
    label: Text('${question.fieldLabel}'),
    contentPadding: EdgeInsets.symmetric(vertical: 16),
    labelStyle: TextStyle(height: 1.5),
  ),
)

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