Flutter中TextField设置maxLength为4后输入超限隐藏内容需多步删除的解决方法

这个问题本质是Flutter在iOS平台的兼容差异：仅依靠TextField自带的maxLength属性时，限制逻辑仅做了视觉层的文本截断，没有同步对控制器存储的实际文本值做长度截断，最终表现为视觉上只展示设置长度的字符数、底层文本却存储了全部输入内容，导致删除操作需要多轮触发才能完全清空输入框。

修复实现方式 #

不要完全依赖TextField内置的maxLength属性做硬限制，通过输入格式化器从输入源头做长度拦截，保证底层存储的文本值和视觉展示值完全同步：

• 第一步：导入Flutter Services库，使用内置的LengthLimitingTextInputFormatter工具类
• 第二步：在TextField组件的inputFormatters参数中配置长度限制规则
• 第三步：保留原有maxLength和counterText: ''配置，不影响原有UI表现

修正后的完整代码示例 #

// 需提前导入 services 包使用输入格式化能力
import 'package:flutter/services.dart';

TextField(
  controller: _controller,
  onChanged: (text) {
    print("text change: $text");
  },
  onSubmitted: (text) {
    print("text submit: $text");
  },
  decoration: InputDecoration(
    hintText: 'Input Money',
    counterText: '',
  ),
  // 从输入源头做长度限制，解决底层值和视觉值不同步的问题
  inputFormatters: [
    LengthLimitingTextInputFormatter(4),
  ],
  maxLength: 4,
)

修复原理：输入格式化器会在内容流入控制器之前做拦截，严格将TextEditingController存储的实际文本长度限制在配置值以内，无论用户是连续输入、粘贴长文本，底层存储的内容长度永远不会超过设定阈值，从根源解决“隐藏超长内容、删除需多轮操作才能清空”的异常。

额外优化提示 #

如果当前输入框是金额输入场景，可以在inputFormatters中叠加纯数字过滤规则，实现输入类型和长度的双重限制，且iOS/Android端表现完全一致：

inputFormatters: [
  FilteringTextInputFormatter.digitsOnly, // 仅允许输入数字
  LengthLimitingTextInputFormatter(4), // 限制最多输入4个数字
]

内容的提问来源于stack exchange，提问作者Huu Bao Nguyen