Flutter货币显示插件money_display的使用

Flutter货币显示插件money_display的使用

作者

工作流程逻辑

这个模块提供了一个名为ChineseMoneyDisplayWidget的组件，用于以中文货币格式（如"¥123,456.78"）显示货币金额，并提供了多种自定义选项以满足不同的需求。

该模块的货币显示逻辑大致如下：

  1. 构造函数参数：ChineseMoneyDisplayWidget构造函数接受多个参数，包括货币金额（price）和其他用于自定义显示的选项，例如整数部分字体大小、小数部分字体大小、最大数值、溢出符号等。

  2. 价格格式化：_formatPrice方法负责将传入的price格式化为富文本（TextSpan）。首先，它将价格转换为字符串，并使用正则表达式分离整数和小数部分。

  3. 处理大值：如果价格大于或等于maxNum，则显示overflowSymbol，通常是一个表示无穷大的符号。如果价格小于maxNum，则继续处理。

  4. 处理大于一万的价格：如果价格大于一万，则整数部分被分成整数部分和小数部分（如果有）。如果没有小数部分，则直接添加"万"符号。如果有小数部分，则同时显示整数和小数部分，并在整数部分后加上"万"符号。

  5. 处理大于一千的价格：如果价格大于一千，则对整数部分进行格式化，并在千位之间添加逗号分隔符。根据是否有小数部分，显示整数部分、小数部分和"万"符号。

  6. 处理小于一千的价格：对于价格小于一千的情况，整数部分没有逗号分隔符。而是根据是否有小数部分来显示整数部分、小数部分和"万"符号。

  7. 处理小数位：如果有小数部分，则将其显示出来，并根据smallFontsize和decimalDigitColor设置样式。

  8. 文本整合：所有这些文本段落都被整合到一个TextSpan中一起显示。

  9. 构建富文本：在build方法中，一部分富文本是currencySymbol，出现在货币符号前。然后，由_formatPrice方法返回的富文本部分在RichText组件中显示。整个组件负责在屏幕上显示此富文本。

通过这些逻辑，ChineseMoneyDisplayWidget组件可以以中文货币格式显示输入的价格，并根据提供的参数自定义样式。这使得开发者能够轻松地将其集成到Flutter应用中，以满足各种货币显示需求。

使用

描述最简单的用法：

ChineseMoneyDisplayWidget(99.89)

要使用MoneyDisplay小部件，只需导入它并将其包含在您的Flutter应用中。以下是一个简单的示例：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Money Display Example'), // 设置应用栏标题。
        ),
        body: CustomScrollView(
          slivers: [
            const SliverToBoxAdapter(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 显示带有欧元符号的钱款的小部件。
                  MoneyDisplayWidget(
                    192837465.2523432, // 设置要显示的价格。
                    currencySymbol: CurrencySymbol.euro, // 将货币符号设置为欧元。
                    showTrailingZeros: false, // 确定是否显示尾部零。
                    currencySymbolSize: 26, // 设置货币符号的大小。
                    currencySymbolColor: Color.fromARGB(255, 0, 43, 32), // 设置货币符号的颜色。
                    currencySymbolFontWeight: FontWeight.w800, // 设置货币符号的字体粗细。
                    integerPartColor: Color.fromARGB(255, 206, 192, 0), // 设置整数部分的颜色。
                    integerPartSize: 46, // 设置整数部分的大小。
                    decimalPartColor: Colors.purple, // 设置小数部分的颜色。
                  ),
                  // 带有自定义选项的显示中文钱款的小部件。
                  ChineseMoneyDisplayWidget(
                    9999879999.92347,
                    maxNum: 10000000000, // 设置显示的最大数值。
                    integerColor: Colors.blue, // 设置整数部分的颜色。
                    integerFontsize: 25, // 设置整数部分的字体大小。
                    decimalFontsize: 21, // 设置小数部分的字体大小。
                    currencySymbolColor: Colors.pink, // 设置货币符号的颜色。
                    tenThousandSymbol: 'w', // 设置万符号。
                    tenThousandSymbolColor: Color.fromARGB(255, 0, 156, 78), // 设置万符号的颜色。
                  ),
                  // 显示带有自定义货币符号的钱款的小部件。
                  MoneyDisplayWidget(
                    12345, // 设置要显示的价格。
                    currencySymbol: CurrencySymbol.custom, // 设置货币符号为自定义。
                    customCurrencySymbol: '💲', // 如果使用自定义货币符号，请在此处设置。
                    showTrailingZeros: false, // 确定是否显示尾部零。
                  ),
                ],
              ),
            ),
            SliverGrid.count(
              crossAxisCount: 4,
              children: const [
                Center(child: ChineseMoneyDisplayWidget(0.9)),
                Center(child: ChineseMoneyDisplayWidget(0.17)),
                Center(child: ChineseMoneyDisplayWidget(0.1796)),
                Center(child: ChineseMoneyDisplayWidget(6)),
                Center(child: ChineseMoneyDisplayWidget(6.1)),
                Center(
                  child: ChineseMoneyDisplayWidget(
                    9.16,
                    decimalFontsize: 29,
                    integerColor: Color.fromARGB(255, 0, 150, 187),
                  ),
                ),
                Center(child: ChineseMoneyDisplayWidget(9.1671)),
                Center(child: ChineseMoneyDisplayWidget(10)),
                Center(child: ChineseMoneyDisplayWidget(10.7)),
                Center(
                  child: ChineseMoneyDisplayWidget(
                    10.71,
                    integerFontsize: 25,
                  ),
                ),
                Center(child: ChineseMoneyDisplayWidget(999)),
                Center(child: ChineseMoneyDisplayWidget(999.7)),
                Center(
                  child: ChineseMoneyDisplayWidget(
                    999.99,
                    decimalDigitColor: Color.fromARGB(255, 80, 0, 133),
                  ),
                ),
                Center(child: ChineseMoneyDisplayWidget(1000)),
                Center(child: ChineseMoneyDisplayWidget(1995.0)),
                Center(child: ChineseMoneyDisplayWidget(1995.07)),
                Center(child: ChineseMoneyDisplayWidget(6666.66)),
                Center(child: ChineseMoneyDisplayWidget(9999)),
                Center(
                  child: ChineseMoneyDisplayWidget(
                    99999,
                    currencyFontWeight: FontWeight.w900,
                    currencySymbolColor: Color.fromARGB(255, 22, 0, 148),
                    currencySymbolFontsize: 56,
                  ),
                ),
                Center(child: ChineseMoneyDisplayWidget(999999)),
                Center(child: ChineseMoneyDisplayWidget(996786)),
                Center(
                  child: ChineseMoneyDisplayWidget(
                      9999999), // maxNum 默认为 10000。
                ),
                Center(
                  child: ChineseMoneyDisplayWidget(
                    9999999,
                    maxNum: 10000001, // 设置自定义的最大显示数值。
                  ),
                ),
                Center(
                  child: ChineseMoneyDisplayWidget(
                    9999999.97,
                    maxNum: 10000001,
                    integerColor: Colors.blue,
                    integerFontsize: 25,
                    decimalFontsize: 21,
                    currencySymbolColor: Colors.pink,
                    tenThousandSymbol: 'w',
                    tenThousandSymbolColor: Color.fromARGB(255, 0, 156, 78),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter货币显示插件money_display的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter货币显示插件money_display的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


money_display 是一个用于在 Flutter 应用中格式化并显示货币金额的插件。它可以方便地将数字格式化为带有货币符号、千位分隔符和小数点的字符串。以下是 money_display 的基本使用指南。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 money_display 依赖：

dependencies:
  flutter:
    sdk: flutter
  money_display: ^2.0.0

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

2. 导入包

在需要使用 money_display 的 Dart 文件中导入包：

import 'package:money_display/money_display.dart';

3. 使用 MoneyDisplay 组件

MoneyDisplay 是一个 Widget，可以用来显示格式化后的货币金额。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MoneyDisplay Example'),
        ),
        body: Center(
          child: MoneyDisplay(
            amount: 1234567.89,
            amountStyle: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
              color: Colors.green,
            ),
            amountFormat: MoneyFormat.nonSymbol,
            formatting: MoneyFormatting(
              thousandSeparator: ',',
              decimalSeparator: '.',
              fractionDigits: 2,
            ),
          ),
        ),
      ),
    );
  }
}

4. 参数说明

MoneyDisplay 组件有以下几个主要参数：

  • amount: 要显示的金额，通常是一个 double 或 int 类型。
  • amountStyle: 用于自定义金额的文本样式（TextStyle）。
  • amountFormat: 指定金额的显示格式，可以是 MoneyFormat.nonSymbol（不带货币符号）或 MoneyFormat.symbolOnLeft（货币符号在左侧）。
  • formatting: 一个 MoneyFormatting 对象，用于指定千位分隔符、小数点和小数位数。

5. MoneyFormatting 参数

MoneyFormatting 类用于自定义金额的格式化方式：

  • thousandSeparator: 千位分隔符，默认是 ,。
  • decimalSeparator: 小数点分隔符，默认是 .。
  • fractionDigits: 小数位数，默认是 2。

6. 示例代码

以下是一个更复杂的示例，展示了如何使用不同的货币格式和样式：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MoneyDisplay Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MoneyDisplay(
                amount: 1234567.89,
                amountStyle: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                  color: Colors.green,
                ),
                amountFormat: MoneyFormat.nonSymbol,
                formatting: MoneyFormatting(
                  thousandSeparator: ',',
                  decimalSeparator: '.',
                  fractionDigits: 2,
                ),
              ),
              SizedBox(height: 20),
              MoneyDisplay(
                amount: 9876543.21,
                amountStyle: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.w500,
                  color: Colors.blue,
                ),
                amountFormat: MoneyFormat.symbolOnLeft,
                formatting: MoneyFormatting(
                  thousandSeparator: '.',
                  decimalSeparator: ',',
                  fractionDigits: 3,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部