Flutter中输入文本超出输入框后被隐藏的问题解决方法

当输入的文本长度超出输入框范围时，文本会被隐藏，效果如下：

原输入框代码如下：

Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        labelFormStyle("Nome do equipamento"),
                        Container(
                          height: hasErrorForm && equipmentNameController.text.isEmpty ? 55 : 35,
                          child: Container(
                          height: hasErrorForm && equipmentNameController.text.isEmpty ? 55 : 35,
                          child: TextFormField(
                            validator: (value){
                              return validatorEmpty(value);
                            },
                            controller: equipmentNameController,
                            keyboardType: TextInputType.multiline,
                            maxLines: null,
                            textInputAction: TextInputAction.next,
                            style: TextStyle(
                                fontSize: 14
                            ),
                            decoration: InputDecoration(
                                isDense: true,
                                enabledBorder: enableBorderField(),
                                focusedBorder: enableBorderField(),
                                disabledBorder: enableBorderField(),
                                border: enableBorderField(),
                                focusedErrorBorder: errorBorderField(equipmentNameController.text.isEmpty),
                                errorBorder: errorBorderField(equipmentNameController.text.isEmpty)
                            ),
                            onChanged: (value){
                              if(hasErrorForm){
                                setState(() {
                                  _formKey.currentState!.validate();
                                });
                              }
                            },
                          ),
                        ),
                      ],
                    ),

问题原因 #

你给TextFormField嵌套了两层固定高度的Container，虽然设置了maxLines: null允许文本自动换行，但固定高度限制了输入框的可展开空间，导致文本超出后被裁剪隐藏。同时isDense: true过度压缩了输入框内边距，加剧了文本被遮挡的问题。

解决方案 #

移除固定高度的Container，让TextFormField根据输入内容自适应高度；若需处理错误状态，利用TextFormField自身的错误提示机制自动调整高度，无需手动固定。

修改后的代码示例：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    labelFormStyle("Nome do equipamento"),
    // 移除固定高度的嵌套Container，让输入框自适应高度
    TextFormField(
      validator: (value){
        return validatorEmpty(value);
      },
      controller: equipmentNameController,
      keyboardType: TextInputType.multiline,
      maxLines: null, // 保持自动换行和高度自适应
      textInputAction: TextInputAction.next,
      style: TextStyle(fontSize: 14),
      decoration: InputDecoration(
        isDense: true,
        // 手动设置内边距，避免isDense过度压缩导致文本拥挤
        contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        enabledBorder: enableBorderField(),
        focusedBorder: enableBorderField(),
        disabledBorder: enableBorderField(),
        border: enableBorderField(),
        focusedErrorBorder: errorBorderField(equipmentNameController.text.isEmpty),
        errorBorder: errorBorderField(equipmentNameController.text.isEmpty)
      ),
      onChanged: (value){
        if(hasErrorForm){
          setState(() {
            _formKey.currentState!.validate();
          });
        }
      },
    ),
  ],
),

补充说明 #

• 如果需要在错误状态下给输入框预留更多空间，无需手动固定高度，TextFormField会在validator返回错误信息时，自动扩展高度显示错误文本。
• 若必须设置最小高度，可以给TextFormField包裹一层SizedBox并设置minHeight，而非固定height，这样既保证基础高度，又能让输入框随内容展开。

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