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

flutter_masked_text2 是一个用于Flutter的文本格式化插件，可以帮助开发者轻松实现各种输入格式的控制。以下是该插件的详细使用说明。

安装

请按照官方指南进行安装。

使用

首先导入库：

import 'package:flutter_masked_text2/flutter_masked_text2.dart';

MaskedTextController

创建控制器

创建一个带有特定格式的控制器：

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

将控制器设置到TextField中：

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

Mask选项

在mask中可以使用以下字符：

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

初始值

可以通过构造函数中的text属性设置初始值：

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

更新文本

初始化后更新文本可以使用updateText方法：

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

print(controller.text); // 输出：123-456

自定义翻译器

如果需要自定义正则表达式来允许某些值，可以传递自定义翻译字典：

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

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

更改运行时的Mask

可以使用updateMask方法在控制器创建后更改Mask：

var cpfController = 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+]

可以在某些情况下验证Mask值以决定是否允许输入：

var controller = MaskedTextController(mask: '(00) 0000-0000');
controller.beforeChange = (String previous, String next) {
  // 自定义逻辑
  return true;
};

Hook: afterChange [v0.7.0+]

可以在控制器中设置此函数，在每次设置后调用：

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

MoneyMaskedTextController

基本使用

创建MoneyMaskedTextController：

var controller = MoneyMaskedTextController();

// 在TextField中使用
TextField(controller: controller, keyboardType: TextInputType.number)

小数点和千位分隔符

可以自定义小数点和千位分隔符：

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

程序化设置值

使用updateValue方法程序化设置值：

controller.updateValue(1234.0);

获取双精度数值

从Masked文本中获取数值，可以使用numberValue属性：

double val = controller.numberValue;

使用装饰符号

可以使用货币符号：

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

print(controller.text); // 输出：R$ 123,45

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

print(controller.text); // 输出：99,99 US$

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

print(controller.text); // 输出：to pay: 123,45 US$

Hook: afterChange [v0.7.0+]

可以监控Mask和值的变化：

var controller = MoneyMaskedTextController();

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

定义小数位数 [v0.8.0+]

可以使用precision属性定义小数位数：

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

print(controller.text); // 输出：123,450

示例Demo

下面是一个完整的示例，展示如何使用flutter_masked_text2插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final moneyController = MoneyMaskedTextController();
    final cpfController = MaskedTextController(mask: '000.000.000-00');

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Masked Text Example')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              TextField(
                controller: cpfController,
                decoration: InputDecoration(labelText: 'CPF'),
                keyboardType: TextInputType.number,
              ),
              SizedBox(height: 20),
              TextField(
                controller: moneyController,
                decoration: InputDecoration(labelText: 'Money'),
                keyboardType: TextInputType.number,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  print("CPF: ${cpfController.text}");
                  print("Money: ${moneyController.text}");
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}