Flutter 在 TextFormField 中给定间隔后添加分隔符

Question

我想要一个

TextFormField

根据给定的

separator

和

interval

格式化输入。

例如

separator = '-'

和

interval = 4

输出应如下所示：

输入：1234 输出：1234

输入12345678 输出：1234-5678

输入：12345678910 输出：1234-5678-910

在此示例中，应在用户键入第 5 个字符时插入分隔符。

我现在尝试了多种方法，但无法得到通用的工作解决方案。这是我最后一次尝试：

  void _addSeperator(String value) {
    final separator = widget.separator!;
    final separatorInterval = widget.separatorInterval!;

    value = value.replaceAll(separator, ''); // Remove existing separators
    int length = value.length;
    int separatorCount = (length / separatorInterval).floor();
    for (int i = 1; i <= separatorCount; i++) {
      int index = i * separatorInterval +
          (i - 1); // Calculate the index to insert separator
      if (index < length) {
        value = value.substring(0, index) +
            separator +
            value.substring(index, value.length);
      }
    }

    _controller.text = value;
  }

我认为这不应该那么难，但我无法让它发挥作用。也没有找到任何这方面的东西。如果您需要更多信息，请告诉我。

Answer 1

在 TextFormField 中有属性

inputFormatters:

您可以按如下方式使用：

inputFormatters: [SeparatorInputFormatter(separator: separator, interval: separatorInterval)],

添加该类：

class SeparatorInputFormatter extends TextInputFormatter {
  final String separator;
  final int interval;

  SeparatorInputFormatter({required this.separator, required this.interval});

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.selection.baseOffset == 0) {
      return newValue;
    }

    final newText = StringBuffer();
    for (int i = 0; i < newValue.text.length; i++) {
      if (i > 0 && i % interval == 0) {
        newText.write(separator);
      }
      newText.write(newValue.text[i]);
    }

    return newValue.copyWith(
      text: newText.toString(),
      selection: TextSelection.collapsed(
        offset: newText.length,
      ),
    );
  }
}