flutter 带掩码的TextFormField文本输入格式化程序在更改值时清除内容

1l5u6lss  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(119)

用控制器初始化它们的值。有些字段是纯文本字段,但有些字段有掩码,如电话和邮政编码字段。
一旦我把字段放在焦点上,并开始退格键来擦除最后的字符,它在没有掩码的字段上工作得很好。有掩码的字段将清除字段的全部内容。
我使用的是Flutter 3和mask_text_input_formatter ^2.4.0。
下面是我的代码,它重现了两个字段的问题。如果你运行这段代码,并把焦点放在name字段上,你可以退格它,只有最后的字符会被清除。但在phone字段中,这会导致整个字段被清除。

import 'package:flutter/material.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

final phoneMaskFormatter = MaskTextInputFormatter(mask: '(###) ### ####');

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  final _formKey = GlobalKey<FormState>();

  late TextEditingController _nameController;
  late TextEditingController _phoneController;

  var myData = {'name': 'William', 'phone': '(305) 786 1234'};

  @override
  void initState() {
    super.initState();
    _nameController = TextEditingController();
    _phoneController = TextEditingController();

    _nameController.text = myData['name']!;
    _phoneController.text = myData['phone']!;
  }

  @override
  void dispose() {
    super.dispose();
    _nameController.dispose();
    _phoneController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Form(
          key: _formKey,
          child: Container(
            padding: EdgeInsets.all(50),
            child: Column(
              children: [
                Text('Name: ${myData['name']}'),
                Text('Phone: ${myData['phone']}'),
                SizedBox(height: 100),
                TextFormField(
                    controller: _nameController,
                    onChanged: (value) {
                      // do my stuff
                      setState(() {
                        myData['name'] = value;
                      });
                    }),
                TextFormField(
                    controller: _phoneController,
                    inputFormatters: [phoneMaskFormatter],
                    onChanged: (value) {
                      // do my stuff
                      setState(() {
                        myData['phone'] = value;
                      });
                    }),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

现在唯一对我起作用的就是在电话领域摘下面具。

kdfy810k

kdfy810k1#

使用extended_masked_text: ^2.3.1它满足您的要求。
声明_phoneController,然后初始化与您所做的相同。

MaskedTextController _phoneController =
      MaskedTextController(mask: '(000) 000 0000');

void initState() {
...
  _phoneController.text = myData['phone']!;
...
}

并除去inputFormatters: [numberController]

相关问题