Flutter限制特殊字符输入：仅允许数字与小数点的TextField实现

嘿，我来帮你搞定这个TextField的输入限制问题！你遇到的光标跳开头、特殊字符清不掉的问题，主要是因为之前的监听器写法有几个小问题：正则逻辑不对、没有处理光标位置，还有拼写错误（replaceaLL应该是replaceAll）。下面给你两种解决方案，其中第二种是Flutter官方推荐的更优雅的方式。

方法一：修复Controller监听器 #

如果你想继续用控制器监听器的方式，可以这样修改代码，解决光标和字符清理的问题：

// 添加监听器的地方
_controller.addListener(restrictCharacters);

// 修正后的监听器方法
void restrictCharacters() {
  // 先保存当前的光标位置，避免设置文本后光标跳开头
  final currentCursorPos = _controller.selection.base.offset;
  String originalText = _controller.text;

  // 第一步：移除所有非数字、非小数点的字符
  String cleanedText = originalText.replaceAll(RegExp(r'[^0-9.]'), '');

  // 第二步：确保文本中最多只有一个小数点（防止输入多个.）
  if (cleanedText.split('.').length > 2) {
    List<String> parts = cleanedText.split('.');
    cleanedText = parts[0] + '.' + parts.sublist(1).join('');
  }

  // 只有当文本确实发生变化时才更新，避免无限触发监听器
  if (cleanedText != originalText) {
    _controller.text = cleanedText;
    // 恢复光标位置，同时处理光标位置超出文本长度的情况
    _controller.selection = TextSelection.collapsed(
      offset: currentCursorPos <= cleanedText.length ? currentCursorPos : cleanedText.length,
    );
  }
}

方法二：使用TextInputFormatter（推荐） #

Flutter提供了TextInputFormatter专门用来处理输入格式化，这种方式更简洁，也不会有光标异常的问题，是官方推荐的做法。

1. 创建自定义输入格式化器 #

class DecimalNumberFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 只保留数字和小数点
    String filteredText = newValue.text.replaceAll(RegExp(r'[^0-9.]'), '');

    // 处理多个小数点的情况：只保留第一个小数点，后面的小数点转为普通数字
    if (filteredText.split('.').length > 2) {
      List<String> parts = filteredText.split('.');
      filteredText = parts[0] + '.' + parts.sublist(1).join('');
    }

    // 返回处理后的输入值，自动维护正确的光标位置
    return TextEditingValue(
      text: filteredText,
      selection: TextSelection.collapsed(offset: filteredText.length),
    );
  }
}

2. 在TextField中使用 #

TextField(
  controller: _controller,
  maxLengthEnforced: true,
  // 更明确指定带小数的数字键盘
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  maxLength: 4,
  inputFormatters: [
    // 先通过系统提供的过滤器允许数字和小数点
    FilteringTextInputFormatter.allow(RegExp(r'[0-9.]')),
    // 再用自定义格式化器处理多个小数点的情况
    DecimalNumberFormatter(),
  ],
)

为什么之前的代码有问题？ #

1. 正则表达式逻辑错误：你之前的正则是匹配-、,、空格，但没有考虑到如果有其他特殊字符（虽然数字键盘可能不会出现），而且没有处理多个小数点的情况；
2. 光标位置未保存：直接设置_controller.text会重置光标到开头，必须手动保存并恢复光标位置；
3. 拼写错误：replaceaLL应该是replaceAll，这个小错误会导致方法无法执行；
4. 无限循环风险：没有判断文本是否变化就更新，会反复触发监听器。

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