可用于输入货币形式值的 Flutter widget 包

MoneyTextFormField

MoneyTextFormField 是一个 flutter widget 包，可以用于输入货币形式的值，并实时显示输出格式。

该 widget 基于 FlutterMoneyFormatter 包，该包具有强大的货币格式化能力。

安装

有关安装 MoneyTextFormField 的完整步骤，请参阅 安装指南。

用法

以下是使用 MoneyTextFormField 的最简单示例

import 'package:moneytextformfield/moneytextformfield.dart';

  /// ... some lines of code ...
  MoneyTextFormField(
    settings: MoneyTextFormFieldSettings()
  )
  /// ... some lines of code ...

对于不理解上述代码实现的，可以查看下面的代码，创建一个可以直接使用的应用程序。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController mycontroller = TextEditingController();

  @override
  void initState() {  
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MoneyTextFormField Demo'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => print(mycontroller.text),
          child: Icon(Icons.save),
        ),
        body: Column(
          children: <Widget>[
            /// Begin of :> MoneyTextFormField
            MoneyTextFormField(
              settings: MoneyTextFormFieldSettings(
                controller: mycontroller
              )
            )
            /// End of :> MoneyTextFormField
          ]
        )
      )
    );
  }
}

上面的代码将显示如下效果

图 1：使用完整格式

通过稍作修改，您将获得以下结果

图 2：使用紧凑格式

参照上面的示例代码，要获取用户输入的数值，可以通过 mycontroller.text 来获取，就像在 FloatingActionButton widget 的 onPressed 事件中一样。

配置

目前，MoneyTextFormField 只使用一个属性来配置该对象的显示，即 settings 属性，其数据类型是 MoneyTextFormFieldSettings 的实例。

MoneyTextFormFieldSettings

名称	数据类型	描述
`控制器`	`TextEditingController`	一个用于可编辑文本字段的控制器。
`validator`	`FormFieldValidator<String>`	一个可选的验证输入值的方法。如果输入无效，则返回一个要显示的错误字符串，否则返回 null。
`inputFormatters`	`List<TextInputFormatter>`	可以注入一个可选的 TextInputFormatter 来提供即时验证和格式化正在编辑的文本。
`onChanged`	`void`	一个可选的注册方法，当对象更改时会调用该闭包。
`moneyFormatSettings`	`MoneyFormatSettings`	在此处查看
`appearanceSettings`	`AppearanceSettings`	在此处查看
`enabled`	`布尔值`	表单是否可以接收用户输入。

技巧

无需在 controller.text 中初始化值，因为该值将被忽略。controller 属性仅用于捕获用户输入的值。

注意事项

controller.text 中包含的值与用户输入的值完全相同，并且数据类型为 String。如果想获得相同格式的结果，可以使用 MoneyTextFormField 使用的 FlutterMoneyFormatter 包。

查看 FlutterMoneyFormatter 的详细信息。

AppearanceSettings

名称	数据类型	描述
`labelText`	`字符串`	描述输入字段的文本。默认值为 `'Amount'`
`hintText`	`字符串`	提示字段接受何种输入的文本。
`icon`	`Widget`	在装饰容器内部和之前显示的图标。
`labelStyle`	`TextStyle`	当标签位于输入字段上方（即垂直相邻）时，用于 `labelText` 的样式。
`inputStyle`	`TextStyle`	用于输入字段的样式。
`formattedStyle`	`TextStyle`	用于格式化输出文本的样式。
`errorStyle`	`TextStyle`	用于 `errorText` 的样式
`padding`	`EdgeInsetGeometry`	用于嵌入 widget 的空间量

MoneyFormatSettings

名称	数据类型	描述
`amount`	`双精度`	初始化 widget 时使用的十进制值。默认值为 `0.00`。
`fractionDigits`	`整数`	格式化输出时使用的小数位数。默认值为 `2`。
`currencySymbol`	`字符串`	格式化输出时使用的符号。默认值为 `'$'`（美元符号）。
`thousandSeparator`	`字符串`	格式化输出时用作千位分隔符的字符。默认值为 `','`（逗号）。
`decimalSeparator`	`字符串`	格式化输出时用作小数点分隔符的字符。默认值为 `'.'`（点）。
`symbolAndNumberSeparator`	`字符串`	用作符号和数字之间分隔符的字符。默认值为 `' '`（空格）。
`displayFormat`	`MoneyDisplayFormat`	在此处查看

MoneyDisplayFormat

MoneyDisplayFormat 是一个枚举对象，具有以下值

名称	描述
nonSymbol	用于以完整格式显示货币值，不带货币符号。
symbolOnLeft	用于以完整格式显示货币值，货币符号在左侧。
symbolOnRight	用于以完整格式显示货币值，货币符号在右侧。
compactNonSymbol	用于以短格式显示货币值，不带货币符号。
compactSymbolOnLeft	用于以短格式显示货币值，货币符号在左侧。
compactSymbolOnRight	用于以短格式显示货币值，货币符号在右侧。

GitHub

https://github.com/fadhly-permata/flutter_moneytextfieldform

可用于输入货币形式值的 Flutter widget 包

MoneyTextFormField

安装

用法