Flutter文本输入格式化插件mask_input_formatter的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter文本输入格式化插件mask_input_formatter的使用

mask_input_formatter 是一个用于Flutter项目的插件，它提供了 TextInputFormatter 类来为 TextField 和 TextFormField 格式化用户输入。通过给定的掩码（mask），可以方便地实现电话号码、日期等特定格式的输入框。

示例

下面是一些使用了不同掩码格式的输入框示例：

mask_example

使用方法

1. 安装指南

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

2. 导入库

import 'package:mask_input_formatter/mask_input_formatter.dart';

3. 创建掩码格式器

MaskInputFormatter myFormatter = MaskInputFormatter(mask: '(AA) #####');

4. 设置在TextField或TextFormField中

TextFormField(
    inputFormatters: [myFormatter],
    decoration: InputDecoration(
        hintText: "(AB) 12345",
    )
)

结果

例如，当输入为 JK75757 时，输出将被格式化为 (JK) 75757 并显示在文本字段中。

其他掩码示例

你可以根据需要定义不同的掩码格式：

MaskInputFormatter dateFormatter = MaskInputFormatter(mask: '##/##/####'); // --> 26/05/2021
MaskInputFormatter phoneFormatter = MaskInputFormatter(mask: '+# (###) ###-####'); // --> +1 (234) 567-8901
MaskInputFormatter numberFormatter = MaskInputFormatter(mask: 'AAA-###', textAllCaps: true); // --> XYZ-789

注意事项

  • 'A' 字符仅允许 A-Z 的字母。
  • '#' 字符仅允许数字。
  • 其他字符和符号将作为掩码的一部分添加。

完整示例代码

以下是完整的示例代码，展示了如何在一个简单的Flutter应用程序中使用 mask_input_formatter 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FormatterExample(),
    );
  }
}

/// An Example class to test [MaskInputFormatter]
class FormatterExample extends StatefulWidget {
  const FormatterExample({Key? key}) : super(key: key);

  @override
  _UsersData createState() => _UsersData();
}

class _UsersData extends State<FormatterExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade200,
      body: SafeArea(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextFormField(
                  inputFormatters: [
                    MaskInputFormatter(mask: '#####-#######-#'),
                  ],
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "42000-0000000-0",
                  ),
                  textInputAction: TextInputAction.next,
                  keyboardType: TextInputType.number,
                ),
                SizedBox(height: 4),
                TextFormField(
                  inputFormatters: [
                    MaskInputFormatter(mask: '(AA) ### #######', textAllCaps: true)
                  ],
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "(AB) 301 4567890",
                  ),
                  textInputAction: TextInputAction.next,
                ),
                SizedBox(height: 4),
                TextFormField(
                  inputFormatters: [
                    MaskInputFormatter(mask: '+# (###) ###-##-##'),
                  ],
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "+1 (234) 567-89-01",
                  ),
                  textInputAction: TextInputAction.next,
                ),
                SizedBox(height: 4),
                TextFormField(
                  inputFormatters: [
                    MaskInputFormatter(mask: '##/##/####'),
                  ],
                  textInputAction: TextInputAction.next,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: "23/05/2021",
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以上就是关于 mask_input_formatter 插件的基本介绍及使用方法。希望这些信息能帮助你在项目中更好地处理各种类型的用户输入！


更多关于Flutter文本输入格式化插件mask_input_formatter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter文本输入格式化插件mask_input_formatter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用mask_input_formatter插件来格式化文本输入的示例代码。这个插件允许你定义输入字段的掩码格式，例如电话号码、信用卡号等。

首先，你需要在你的pubspec.yaml文件中添加mask_input_formatter依赖：

dependencies:
  flutter:
    sdk: flutter
  mask_input_formatter: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以使用MaskTextInputFormatter来格式化文本输入。以下是一个完整的示例，展示如何格式化电话号码输入：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Mask Input Formatter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mask Input Formatter Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: 'Phone Number',
                ),
                keyboardType: TextInputType.phone,
                inputFormatters: [
                  FilteringTextInputFormatter.digitsOnly,  // 只允许输入数字
                  MaskTextInputFormatter(
                    mask: '(###) ###-####',  // 掩码格式
                    filter: {'#': RegExp(r'[0-9]')},  // 允许通过的字符
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们导入了mask_input_formatter包。
  2. 在TextField中，我们使用了inputFormatters属性来应用格式化器。
  3. FilteringTextInputFormatter.digitsOnly确保只输入数字。
  4. MaskTextInputFormatter定义了掩码格式(###) ###-####，并指定了允许通过的字符（在这个例子中，只允许数字）。

这样，当用户输入电话号码时，输入将自动按照掩码格式进行格式化。例如，当用户输入1234567890时，显示将自动变为(123) 456-7890。

你可以根据需要调整掩码格式和允许的字符，以适应不同的输入需求，如信用卡号、日期等。

回到顶部