Flutter文本格式化插件flutter_masked_text3的使用

Flutter文本格式化插件flutter_masked_text3的使用

flutter_masked_text

Masked text input for flutter.

Alert

Hi guys!

Unfortunately, I’m not developing mobile anymore. This repo will not receive updates.

Install

Follow this GUIDE

Usage

导入库：

import 'package:flutter_masked_text3/flutter_masked_text3.dart';

MaskedText

创建你的掩码控制器：

var controller = new MaskedTextController(mask: '000.000.000-00');

将控制器设置到文本字段中：

return new MaterialApp(
    title: 'Flutter Demo',
    theme: new ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: new SafeArea(
        child: new Scaffold(
            body: new Column(
                children: <Widget>[
                    new TextField(controller: controller,) // 这里
                ],
            ),
        ),
    ),
);

这将是结果：

Mask Options

在掩码中，你可以使用以下字符：

• 0: 接受数字
• A: 接受字母
• @: 接受数字和字母
• *: 接受任何字符

Initial Value

要以初始值开始一个掩码，只需在构造函数中使用text属性：

var controller = new MaskedTextController(mask: '000-000', text: '123456');

Update text programaticaly

如果你想要在控制器初始化后设置新的文本，可以使用updateText方法：

var controller = new MaskedTextController(text: '', mask: '000-000');
controller.updateText('123456');

print(controller.text); //123-456

Using custom translators

如果你想使用自定义的正则表达式来允许值，你可以传递一个自定义的翻译字典：

const translator = {
    '#': new RegExp(r'my regex here')
};

var controller = new MaskedTextController(mask: '####', translator: translator);

如果你想使用默认翻译器但覆盖其中的一些，只需要从getDefaultTranslator获取基础并覆盖你想要的部分（这里是一个用于模糊信用卡号码的示例）：

var translator = MaskedTextController.getDefaultTranslator(); // 获取默认翻译器的新实例。
translator.remove('*'); // 移除通配符翻译器。

var controller = new MaskedTextController(mask: '0000 **** **** 0000', translator: translator);
controller.updateText('12345678');

print(controller.text); //1234 **** **** 5678

Change the mask in runtime

你可以在创建控制器后使用updateMask方法更改掩码。

var cpfController = new MaskedTextController(text: '12345678901', mask: '000.000.000-00');

print(cpfController.text); //'123.456.789-01'

cpfController.updateMask('000.000.0000-0');

print(cpfController.text); //'123.456.7890-1'

Hook: beforeChange [v0.7.0+]

在某些情况下，你可能希望验证掩码值以决定是否允许输入。

它很简单：你只需要设置beforeChange并返回true或false。如果你返回true，它将接受新值并尝试应用掩码。否则，它将拒绝新值。

该函数接收两个参数：

• previous: 控制器的前一个文本。
• next: 将要被掩码的下一个文本。

var controller = new MaskedTextController(mask: '(00) 0000-0000');
controller.beforeChange = (String previous, String next) {
    // 我的逻辑在这里

    return true;
};

Hook: afterChange [v0.7.0+]

此函数将在控制器设置后调用。

该函数接收两个参数：

• previous: 控制器的前一个文本。
• next: 将要被掩码的下一个文本。

var controller = new MaskedTextController(mask: '(00) 0000-0000');
controller.afterChange = (String previous, String next) {
    print("$previous | $next");
};

Money Mask

要使用货币掩码，创建一个MoneyMaskedTextController：

var controller = new MoneyMaskedTextController();

//....
new TextField(controller: controller, keyboardType: TextInputType.number)

Decimal and Thousand separator

你可以自定义decimal和thousand分隔符：

var controller = new MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');

Set value programaticaly

要程序化地设置值，使用updateValue：

controller.updateValue(1234.0);

Get double value

要从掩码文本获取数字值，使用numberValue属性：

double val = controller.numberValue;

Using decoration symbols

如果你愿意，可以使用货币符号：

// 左边的符号
var controller = new MoneyMaskedTextController(leftSymbol: 'R\$ ');
controller.updateValue(123.45);

print(controller.text); //-> R$ 123,45


// 右边的符号
var controller = new MoneyMaskedTextController(rightSymbol: ' US\$');
controller.updateValue(99.99);

print(controller.text); //-> 99,99 US$


// 两边都有
var controller = new MoneyMaskedTextController(leftSymbol: 'to pay:', rightSymbol: ' US\$');
controller.updateValue(123.45);

print(controller.text); //-> to pay: 123,45 US$

Hook: afterChange [v0.7.0+]

你可以监视掩码和值的变化。为此，只需设置afterChange钩子。

该函数接收两个参数：

• masked: 控制器的掩码文本。
• raw: 文本的双精度值。

var controller = new MoneyMaskedTextController();

controller.afterChange = (String masked, double raw) {
    print("$masked | $raw");
};

Defining decimal places [v0.8.0+]

你可以使用precision属性定义小数点后的位数：

var controller = new MoneyMaskedTextController(precision: 3);
controller.updateValue(123.45);

print(controller.text); //-> 123,450