Flutter格式化工具集合插件uiv_formater_collection的使用

Flutter格式化工具集合插件uiv_formater_collection的使用

这是一个我在业余时间为我的项目构建的Flutter输入格式化工具集合。它包含了一些常用的格式化功能。

功能

• UIVInputFormaterCurrency：用于货币格式化的工具类。

使用方法

使用 UIVInputFormaterCurrency 进行数值与字符串的相互转换

var fomater = UIVInputFormaterCurrency();

double decimalNominal = 73883.9655;
String decimalNominalText = "73,883.9655";

// 将数值(double)转换为字符串(String)，并格式化为两位小数
fomater.formatDoubleToString(decimalNominal);
// 结果（String）："73,883.97"

// 将字符串(String)转换为数值(double)，并进行四舍五入
fomater.formatStringToDouble(decimalNominalText, isRounded: true);
// 结果（double）：73883.97

// 将字符串(String)转换为数值(double)，不进行四舍五入
fomater.formatStringToDouble(decimalNominalText, isRounded: false);
// 结果（double）：73883.9655

在 TextField 中使用 UIVInputFormaterCurrency 作为输入格式化器

以下是一个完整的示例代码，展示如何在 TextField 中使用 UIVInputFormaterCurrency 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('UIVInputFormaterCurrency 示例'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: InputFormaterExample(),
        ),
      ),
    );
  }
}

class InputFormaterExample extends StatefulWidget {
  @override
  _InputFormaterExampleState createState() => _InputFormaterExampleState();
}

class _InputFormaterExampleState extends State<InputFormaterExample> {
  final TextEditingController _textController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _textController,
          keyboardType: TextInputType.numberWithOptions(decimal: true),
          inputFormatters: [
            // 使用 UIVInputFormaterCurrency 格式化输入
            UIVInputFormaterCurrency(),
          ],
          decoration: InputDecoration(
            labelText: '输入金额',
            border: OutlineInputBorder(),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            // 显示输入框中的值
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: Text('输入值'),
                content: Text(_textController.text),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: Text('关闭'),
                  ),
                ],
              ),
            );
          },
          child: Text('显示输入值'),
        ),
      ],
    );
  }
}

示例效果

运行上述代码后，您将看到一个带有格式化输入框的页面。用户可以输入金额，输入框会自动格式化为带逗号分隔的货币格式。点击“显示输入值”按钮后，弹出对话框显示当前输入框中的值。

注意事项

1. 确保在 pubspec.yaml 文件中添加依赖：

   dependencies:
     uiv_formater_collection: ^版本号