Flutter：TextFormField满行自动换行实现及密文多行冲突解决

自定义TextFormField效果预览 #

当前组件代码 #

TextFormField(
        style: loginText,
        obscureText: obs,
        textAlignVertical: const TextAlignVertical(y: 0.2),
        decoration: InputDecoration(
          hintMaxLines: 2,
          prefixIcon: Icon(icon),
          hintText: hint,
          prefixIconColor: orange,
          hintStyle: loginText,
          enabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(
              color: Colors.grey,
              width: 1.5,
            ),
            borderRadius: BorderRadius.circular(10),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(
              color: orange,
              width: 1.5,
            ),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),

遇到的问题 #

• 设置maxLines、minLines属性时触发错误：'!obscureText || maxLines == 1': Obscured fields cannot be multiline.
• 将keyboardType设为multiline后，仅能通过按回车键换行，无法在行尾自动切换至新行。

解决方案 #

针对问题1：密码输入框的多行限制 #

Flutter的设计规则是：开启密码隐藏（obscureText=true）的输入框不支持多行，这是出于安全交互逻辑的限制。如果你的组件需要同时支持密码输入和多行文本输入，需做分支处理：

TextFormField(
  style: loginText,
  obscureText: obs,
  // 密码模式强制单行，非密码模式支持自动扩展行数
  maxLines: obs ? 1 : null,
  minLines: 1,
  textAlignVertical: const TextAlignVertical(y: 0.2),
  // 其他属性保持不变
  decoration: InputDecoration(...),
),

针对问题2：实现行尾自动换行 #

要触发自动换行，需同时满足三个条件：

1. 设置maxLines: null（或大于1的数值，null会让输入框随内容自动增高）
2. 设置minLines: 1
3. 给TextFormField添加固定宽度约束（比如用Container包裹指定width，或放在有宽度限制的布局中）
   配合keyboardType: TextInputType.multiline，输入内容到达行尾时就会自动换行，无需手动按回车。

调整后的完整示例：

Container(
  width: 300, // 固定宽度，确保输入框有换行边界
  child: TextFormField(
        style: loginText,
        obscureText: obs,
        maxLines: obs ? 1 : null,
        minLines: 1,
        keyboardType: obs ? TextInputType.text : TextInputType.multiline,
        textAlignVertical: const TextAlignVertical(y: 0.2),
        decoration: InputDecoration(
          hintMaxLines: 2,
          prefixIcon: Icon(icon),
          hintText: hint,
          prefixIconColor: orange,
          hintStyle: loginText,
          enabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(
              color: Colors.grey,
              width: 1.5,
            ),
            borderRadius: BorderRadius.circular(10),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(
              color: orange,
              width: 1.5,
            ),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),
)

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