Flutter - 带有 MaskTextInputFormatter 的 TextField - 退格键删除所有字符而不是 1 个字符

Question

我正在尝试学习如何将 TextField 与 MaskTextInputFormatter 正确使用。我还使用 controller 为其设置初始值。但是，当用户按下退格键时，所有文本都会被删除，而不是仅删除 1 个字符。

有人知道如何正确设置它吗？我还尝试通过控制器更改“选择”属性，但没有任何改变。

有状态：

// 这会将初始文本设置到 TextField 中

class _ErrosState extends State<Erros> 

{
var valorController = TextEditingController(
text: "(91) 12345-1234");

// __________________________________________________

// 无状态

class CadastroTelefonePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: 

TextField(
controller: _ErrosState().valorController,
                  
inputFormatters: [MaskTextInputFormatter(

mask: '(##) #####-####',

filter: {"#": RegExp(r'[0-9 ]')})
],
                  onChanged: (text) {
                    _ErrosState.input = text;
                  },
                  obscureText: false,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: '(XX) XXXXX-XXXX',
                  ),
                ),
              ),

Answer 1

像这样将初始文本添加到蒙版中

    final phoneFormatter = MaskTextInputFormatter(
      mask: '### ###-##-##',
      initialText: phoneNumber,
      filter: {"#": RegExp(r'[0-9]')},
    );

Answer 2

您需要更新 mask 的值，然后使用controller.text 设置 TextField 的值。试试这个代码：

final _maskFormatter = MaskTextInputFormatter(
  mask: '(###) ### - ####', filter: {"#": RegExp(r'[0-9]')});
final TextEditingController _phoneController = TextEditingController();

TextFormField(     
 keyboardType: TextInputType.number,
 controller: _phoneController,
 inputFormatters: [_maskFormatter],
)

onTap: () {
 _maskFormatter.updateMask(
  mask: '(###) ### - ####',
  filter: {"#": RegExp(r'[0-9]')},
  newValue: TextEditingValue(
      text: listNameSearch[index]
              .customerPhone ??
          ""));
 _phoneController.text = StringHelper
  .convertUsPhoneNumber(
      listNameSearch[index]
              .customerPhone ??
          "N/A");

 }