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

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

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

masked_text 是一个用于在Flutter应用中实现文本输入格式化的插件。它可以帮助你轻松地为电话号码、邮政编码等类型的输入添加格式化掩码。

开始使用

要开始使用 masked_text，你需要在你的Flutter项目中引入这个包，并在你的Widget树中使用 MaskedTextField 组件。以下是一个简单的示例，展示如何为CPF（巴西的一种个人识别号）创建格式化输入框。

添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  masked_text: ^0.8.0 # 请根据最新版本调整

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

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用 masked_text 插件来创建一个带格式化掩码的输入框。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MaskedTextField(
              mask: "###.###.###-##", // CPF 格式
              controller: _textController,
              maxLength: 14,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                hintText: "Write your Document here",
                labelText: "CPF",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

详细说明

  • mask: 这是最重要的属性，定义了输入框中的文本格式。例如 "###.###.###-##" 适用于巴西的CPF格式。
  • controller: 使用 TextEditingController 来控制和获取输入框中的文本内容。
  • maxLength: 设置输入的最大长度，通常与掩码的长度一致。
  • keyboardType: 指定键盘类型，这里设置为数字键盘以便用户输入数字。
  • decoration: 输入框的装饰属性，可以设置提示文本和标签文本。

通过这种方式，你可以很方便地在Flutter应用中实现各种格式化的输入框。希望这个示例对你有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用masked_text插件进行文本格式化的示例代码。masked_text插件通常用于在文本字段中格式化输入，例如电话号码、信用卡号等。

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

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

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

接下来是一个完整的示例代码，展示了如何使用masked_text插件来格式化电话号码输入：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Masked Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Masked Text Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MaskedTextFieldExample(),
        ),
      ),
    );
  }
}

class MaskedTextFieldExample extends StatefulWidget {
  @override
  _MaskedTextFieldExampleState createState() => _MaskedTextFieldExampleState();
}

class _MaskedTextFieldExampleState extends State<MaskedTextFieldExample> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Enter Phone Number:',
          style: TextStyle(fontSize: 18),
        ),
        SizedBox(height: 8),
        MaskedTextController(
          mask: '(000) 000-0000',
          controller: _controller,
          type: MaskedTextType.phone,
        ),
        TextField(
          controller: _controller,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Phone Number',
          ),
          keyboardType: TextInputType.phone,
          inputFormatters: [
            FilteringTextInputFormatter.digitsOnly,
          ],
        ),
        SizedBox(height: 24),
        Text(
          'Formatted Phone Number: ${_controller.text}',
          style: TextStyle(fontSize: 18, color: Colors.grey),
        ),
      ],
    );
  }
}

解释

  1. 添加依赖： 在pubspec.yaml文件中添加masked_text依赖。

  2. 导入包： 在代码中导入masked_text包。

  3. 创建MaskedTextFieldExample组件：

    • 使用TextEditingController来控制文本字段的值。
    • 使用MaskedTextController来定义输入掩码和类型。在这个例子中，掩码是(000) 000-0000，类型是电话号码。
    • 将MaskedTextController的controller属性设置为之前创建的TextEditingController。

  4. 显示TextField：

    • 使用TextField组件来显示输入字段，并将controller属性设置为MaskedTextController中的controller。
    • 使用inputFormatters来确保只输入数字。

  5. 显示格式化后的文本：

    • 在TextField下方显示格式化后的电话号码。

这样，当用户输入数字时，TextField会根据掩码自动格式化输入内容。

注意：在实际使用中，确保你使用的是masked_text插件的最新版本，并根据需要调整掩码和类型。

回到顶部