Flutter TextField日期输入验证：自动补全/与退格异常解决问询

我明白你遇到的问题了——自动插入分隔符确实能提升日期输入的流畅性，但退格时那个“删不掉”的斜杠着实让人头疼。咱们来一步步解决这个问题：

问题根源 #

你当前的代码只根据当前文本长度判断是否插入分隔符，完全没区分用户是在输入字符还是删除字符。比如当用户把23/删成23时，文本长度回到2，代码又自动加回斜杠，导致无法正常修改。

解决方案1：给Controller加“记忆”（修改现有逻辑） #

核心思路是记录上一次的文本状态，通过对比当前和上一次的文本长度，判断用户是输入还是删除，再针对性处理：

final _controller = TextEditingController();
String _lastText = ''; // 保存上一次的文本，用来判断输入/删除动作

@override
void initState() {
  super.initState();
  _controller.addListener(_onTextChanged);
}

void _onTextChanged() {
  String currentText = _controller.text;
  bool isInputting = currentText.length > _lastText.length;

  if (isInputting) {
    // 输入逻辑：只在长度到2/5且结尾没有斜杠时添加
    if (currentText.length == 2 && !currentText.endsWith('/')) {
      _updateControllerText('$currentText/');
    } else if (currentText.length == 5 && !currentText.endsWith('/')) {
      _updateControllerText('$currentText/');
    }
  } else {
    // 删除逻辑：如果删除后长度是2/5且结尾是斜杠，就去掉它
    if ((currentText.length == 2 || currentText.length == 5) && currentText.endsWith('/')) {
      _updateControllerText(currentText.substring(0, currentText.length - 1));
    }
  }

  // 更新“记忆”，注意要在修改文本后更新，避免循环触发
  _lastText = _controller.text;
}

// 封装文本更新和光标定位的逻辑，避免重复代码
void _updateControllerText(String newText) {
  _controller.value = _controller.value.copyWith(
    text: newText,
    selection: TextSelection.collapsed(offset: newText.length),
    composing: TextRange.empty,
  );
}

@override
void dispose() {
  _controller.removeListener(_onTextChanged);
  _controller.dispose();
  super.dispose();
}

解决方案2：用官方推荐的TextInputFormatter（更优雅） #

Flutter提供了TextInputFormatter专门处理输入格式化，不仅能解决退格问题，还能自动过滤非数字字符，代码更模块化：

class DateFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 先过滤掉所有非数字字符
    final cleanText = newValue.text.replaceAll(RegExp(r'[^0-9]'), '');
    String formatted = '';

    // 按DD/MM/YYYY格式拼接
    if (cleanText.length >= 2) {
      formatted += '${cleanText.substring(0, 2)}/';
      if (cleanText.length >= 4) {
        formatted += '${cleanText.substring(2, 4)}/';
        // 年份最多保留4位
        formatted += cleanText.substring(4).take(4).join();
      } else {
        formatted += cleanText.substring(2);
      }
    } else {
      formatted = cleanText;
    }

    // 处理删除时的光标位置：如果是删除操作且结尾是斜杠，光标往前挪一位
    int cursorPos = formatted.length;
    if (oldValue.text.length > newValue.text.length) {
      if (formatted.endsWith('/') && formatted.length > 1) {
        cursorPos--;
      }
    }

    return TextEditingValue(
      text: formatted,
      selection: TextSelection.collapsed(offset: cursorPos),
      composing: TextRange.empty,
    );
  }
}

// 使用方式：在TextField里配置inputFormatters
TextField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: [DateFormatter()],
  decoration: const InputDecoration(hintText: 'DD/MM/YYYY'),
)

两种方案对比 #

• 方案1：适合小范围调整现有代码，逻辑直观，不需要额外封装。
• 方案2：官方推荐的标准化方案，更健壮（自动过滤非数字），也更容易复用和维护。

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