如何调整Flutter中LabelText高度？使其始终位于输入框边框上方

你设置的TextStyle.height是用来控制文本行高的，不是调整标签位置的，所以不管怎么改都不会生效。要实现标签始终在边框上方，得这么调整：

• 保留floatingLabelBehavior: FloatingLabelBehavior.always，这个属性能让标签一直处于浮动状态
• 用InputDecoration.labelPadding来控制标签的位置偏移，替代无效的TextStyle.height
• 调整contentPadding确保输入内容和标签不重叠

修改后的代码如下：

TextFormField(
  decoration: InputDecoration(
    labelStyle: TextStyle(
      color: AppColors.pink,
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
    floatingLabelBehavior: FloatingLabelBehavior.always,
    floatingLabelStyle: TextStyle(
      color: AppColors.black,
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
    // 调整标签的padding，让它向上移到边框上方
    labelPadding: EdgeInsets.only(bottom: 32), // 数值根据你的布局需求调整
    contentPadding: EdgeInsets.symmetric(vertical: 18.0, horizontal: 24.0),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(25.0),
      borderSide: BorderSide(
        color: AppColors.darkgrey,
      ),
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(25.0),
    ),
    hintText: 'Foulen@domaine.com',
    labelText: "Email",
  ),
  onSaved: (value) {
    _email = value!;
  },
),

关键说明： #

• labelPadding的bottom值设为正数，会把标签向上推（默认标签在输入框内部，增加bottom padding相当于让标签位置向上偏移）
• 如果觉得输入内容位置不对，可以微调contentPadding的vertical值，让输入文本和标签、边框的间距更合理
• 删掉了无效的height属性，避免混淆

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