flutter textinputformatter 不起作用

Question

我想在 textformfield 中实现 textinputformatter

我尝试了下面主题中的代码片段来格式化传入的数字文本以适合 (###) ###-#### ## 的格式，但它不起作用（类 _UsNumberTextInputFormatter 扩展了 TextInputFormatter）

https://medium.com/@rubensdemelo/flutter-formatting-textfield-with-textinputformatter-6caba78668e5

你能告诉我我做错了什么吗？格式化程序如何工作？

final _textInputFormatter = _UsNumberTextInputFormatter();
TextFormField(
              inputFormatters: [_textInputFormatter],
              readOnly: true,
              controller: _textController,
              decoration: InputDecoration(
                hintText: '(123) 456 78 90',
                suffixIcon: _textController.text.isNotEmpty
                    ? IconButton(
                        icon: const Icon(Icons.clear),
                        onPressed: () => _textController.clear(),
                      )
                    : null,
                helperText: 'Enter phone number',
              ),
            ),

class _UsNumberTextInputFormatter 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 = StringBuffer();
    if (newTextLength >= 1) {
      newText.write('(');
      if (newValue.selection.end >= 1) selectionIndex++;
    }
    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++;
    }
    // Dump the rest.
    if (newTextLength >= usedSubstringIndex)
      newText.write(newValue.text.substring(usedSubstringIndex));
    return TextEditingValue(
      text: newText.toString(),
      selection: TextSelection.collapsed(offset: selectionIndex),
    );
  }
}

Answer 1

我也有同样的问题。使用 TextFormField(...readOnly: false 是原因。

Answer 2

尝试一下这个包： https://pub.dev/packages/flutter_multi_formatter

你的 TextFormField 看起来像这：

TextFormField(
          inputFormatters: [MaskedInputFormatter('(###) ### ## ##')],
          readOnly: true,
          controller: _textController,
          decoration: InputDecoration(
            hintText: '(123) 456 78 90',
            suffixIcon: _textController.text.isNotEmpty
                ? IconButton(
                    icon: const Icon(Icons.clear),
                    onPressed: () => _textController.clear(),
                  )
                : null,
            helperText: 'Enter phone number',
          ),
        );