Flutter – 如何格式化电话号码文本字段

标签 flutter dart flutter-layout phone-number

我想让我的 TextFormField 格式以正确的电话号码格式输入号码。

我已经尝试使用下面的 TextInputFormatter

class NumberTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final int newTextLength = newValue.text.length;
    int selectionIndex = newValue.selection.end;
    int usedSubstringIndex = 0;
    final StringBuffer newText = new StringBuffer();
    if (newTextLength >= 1) {
      newText.write('+');
      if (newValue.selection.end >= 1) selectionIndex++;
    }
    if (newTextLength >= 3) {
      newText.write(newValue.text.substring(0, usedSubstringIndex = 1) + ' ');
      if (newValue.selection.end >= 2) selectionIndex += 1;
    }
    if (newTextLength >= 3) {
      newText.write( ' ');
      if (newValue.selection.end >= 6) selectionIndex += 1;
    }
    if (newTextLength >= usedSubstringIndex)
      newText.write(newValue.text.substring(usedSubstringIndex));
    return new TextEditingValue(
      text: newText.toString(),
      selection: new TextSelection.collapsed(offset: selectionIndex),
    );
  }
}

但我没有得到预期的输出

我预期的数字格式 "+1 123-456-7890"

如果需要更多信息,请告诉我。提前致谢。您的努力将不胜感激。

最佳答案

最后我决定从两个单独的 TextFormField 中获取电话号码和国家代码

CountryCodeTextInputFormatter for output like this +12


class CountryCodeTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final int newTextLength = newValue.text.length;
    int selectionIndex = newValue.selection.end;
    int usedSubstringIndex = 0;
    final StringBuffer newText = new StringBuffer();
    if (newTextLength >= 1) {
      newText.write('+');
      if (newValue.selection.end >= 1) selectionIndex++;
    }
    if (newTextLength >= usedSubstringIndex)
      newText.write(newValue.text.substring(usedSubstringIndex));
    return new TextEditingValue(
      text: newText.toString(),
      selection: new TextSelection.collapsed(offset: selectionIndex),
    );
  }
}

PhoneNumberTextInputFormatter for output like this 132-456-7890


class PhoneNumberTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final int newTextLength = newValue.text.length;
    int selectionIndex = newValue.selection.end;
    int usedSubstringIndex = 0;
    final StringBuffer newText = new StringBuffer();
    if (newTextLength >= 4) {
      newText.write(newValue.text.substring(0, usedSubstringIndex = 3) + '-');
      if (newValue.selection.end >= 3)
        selectionIndex += 2;
    }
    if (newTextLength >= 7) {
      newText.write(newValue.text.substring(3, usedSubstringIndex = 6) + '-');
      if (newValue.selection.end >= 6)
        selectionIndex++;
    }
    if (newTextLength >= 11) {
      newText.write(newValue.text.substring(6, usedSubstringIndex = 10) );
      if (newValue.selection.end >= 10)
        selectionIndex++;
    }
    if (newTextLength >= usedSubstringIndex)
      newText.write(newValue.text.substring(usedSubstringIndex));
    return new TextEditingValue(
      text: newText.toString(),
      selection: new TextSelection.collapsed(offset: newText.length),
    );
  }
}

关于Flutter – 如何格式化电话号码文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60667881/

相关文章:

flutter - 隐藏 flutter 数据表中的复选框

flutter - 在未来的异步调用中,我需要一些指导,包括 flutter 和 Dart ,有时情况会发生困惑

flutter - 抽屉小部件打开时如何修改背景的淡入淡出效果?

flutter - Flutter Infinite滚动:如何触发每个滚动一个

dart - Flutter - 如何重启或重绘当前屏幕 Widget

flutter - 在Flutter中,类型Future <List <Item >>不是List错误的子类型

flutter - Flutter:如何使按钮并排而不是一个在另一个下方?

flutter - 为什么在Flutter Sink中添加数据不起作用?

android - 有没有办法在 flutter charts_flutter : ^0. 8.1 中垂直放置标签文本

flutter - 类没有实例获取方法 'length'