Flutter数字文本格式化插件number_text_input_formatter的使用

Flutter数字文本格式化插件number_text_input_formatter的使用

安装

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  number_text_input_formatter: ^lastVersion

使用

对于数字

你可以使用NumberTextInputFormatter来格式化输入的数字。以下是一个示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Number TextInput Formatter'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            inputFormatters: [
              NumberTextInputFormatter(
                integerDigits: 10, // 整数部分最多允许10位
                decimalDigits: 2, // 小数部分最多允许2位
                maxValue: '1000000000.00', // 最大值为10亿
                decimalSeparator: '.', // 小数点分隔符
                groupDigits: 3, // 每三位分组
                groupSeparator: ',', // 分组分隔符
                allowNegative: false, // 不允许负数
                overrideDecimalPoint: true, // 覆盖默认的小数点
                insertDecimalPoint: false, // 不插入小数点
                insertDecimalDigits: true, // 插入小数位
              ),
            ],
            keyboardType: TextInputType.number,
            decoration: InputDecoration(hintText: '请输入数字'),
          ),
        ),
      ),
    );
  }
}
对于货币

你可以使用CurrencyTextInputFormatter来格式化输入的货币金额。以下是一个示例：

import 'package:flutter/material.dart';
import 'package:number_text_input_formatter/currency_text_input_formatter.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Currency TextInput Formatter'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            inputFormatters: [CurrencyTextInputFormatter()],
            keyboardType: TextInputType.number,
            decoration: InputDecoration(hintText: '请输入货币金额'),
          ),
        ),
      ),
    );
  }
}
对于百分比

你可以使用PercentageTextInputFormatter来格式化输入的百分比。以下是一个示例：

import 'package:flutter/material.dart';
import 'package:number_text_input_formatter/percentage_text_input_formatter.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Percentage TextInput Formatter'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: TextField(
            inputFormatters: [PercentageTextInputFormatter()],
            keyboardType: TextInputType.number,
            decoration: InputDecoration(hintText: '请输入百分比'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


number_text_input_formatter 是一个用于 Flutter 的文本输入格式化插件，它可以帮助你在 TextField 或 TextFormField 中对输入的数字进行格式化。这个插件特别适用于需要限制用户输入为特定格式的数字（如电话号码、信用卡号、货币等）的场景。

安装

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

dependencies:
  flutter:
    sdk: flutter
  number_text_input_formatter: ^1.0.0

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

使用示例

以下是一个简单的示例，展示了如何使用 number_text_input_formatter 来格式化用户输入的数字。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Number Text Input Formatter Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: NumberInputForm(),
        ),
      ),
    );
  }
}

class NumberInputForm extends StatefulWidget {
  [@override](/user/override)
  _NumberInputFormState createState() => _NumberInputFormState();
}

class _NumberInputFormState extends State<NumberInputForm> {
  final _controller = TextEditingController();

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
          keyboardType: TextInputType.number,
          inputFormatters: [
            NumberTextInputFormatter(
              format: '###-###-####', // 你可以自定义格式
              separator: '-', // 分隔符
            ),
          ],
          decoration: InputDecoration(
            labelText: 'Enter your phone number',
            hintText: '123-456-7890',
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            // 获取格式化后的文本
            String formattedText = _controller.text;
            print('Formatted Text: $formattedText');
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}
回到顶部