Flutter笔记 电商中文钱银显现插件 Money Display

作者：李俊才 （jcLee95）：blog.csdn.net/qq_28550263
邮箱 ： 291148484@163.com
本文地址：blog.csdn.net/qq_28550263…

目 录* * *

• 1. 概述与入门
• • 项目
  • 概述
  • 装置办法
• 2. 工作办法
• 3. 一个示例
• 4. 接口

1. 概述与入门

Money Display便是一款用于中文钱银显现的插件。在Money Display中你可以定制每一个中文钱银构成部分的款式、符号：

项目

项目主页（pub.dev）：pub.dev/packages/mo…
库房地址（Github）：github.com/jacklee1995…
库房地址（国内）：thispage.tech:9680/jclee1995/f…

概述

在电商项目中，常常需求显现钱银比方：

我为此做了一个小模块，用于自动处理这些问题，没有特殊需求的情况下，可以只是传入一个double数，就像这样：

ChineseMoneyDisplayWidget(99.89)

这将替代你自己实现这些繁琐的数字和字符串处理。假如有需求，你可以经过考虑传入不同参数以指定更多的款式。

装置办法

可以直接经过Flutter的pub东西装置：

flutter pub add money_display

这将向你的包的 pubspec.yaml 文件中增加一行(并运行一个隐式的flutter pub get)：

dependencies:
  money_display: ^1.0.0+1

2. 工作办法

本模块供给了一个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使用中以满意不同的钱银显现需求。

3. 一个示例

import 'package:flutter/material.dart';
import 'package:money_display/money_display.dart';
void main() {
  runApp(const MoneyDisplayExample());
}
class MoneyDisplayExample extends StatelessWidget {
  const MoneyDisplayExample({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Money Display 示例'),
        ),
        body: const Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ChineseMoneyDisplayWidget(0.9),
              ChineseMoneyDisplayWidget(0.17),
              ChineseMoneyDisplayWidget(0.1796),
              ChineseMoneyDisplayWidget(6),
              ChineseMoneyDisplayWidget(6.1),
              ChineseMoneyDisplayWidget(9.16),
              ChineseMoneyDisplayWidget(9.1671),
              ChineseMoneyDisplayWidget(10),
              ChineseMoneyDisplayWidget(10.7),
              ChineseMoneyDisplayWidget(10.71),
              ChineseMoneyDisplayWidget(999),
              ChineseMoneyDisplayWidget(999.7),
              ChineseMoneyDisplayWidget(999.99),
              ChineseMoneyDisplayWidget(1000),
              ChineseMoneyDisplayWidget(1995.0),
              ChineseMoneyDisplayWidget(1995.07),
              ChineseMoneyDisplayWidget(6666.66),
              ChineseMoneyDisplayWidget(9999),
              ChineseMoneyDisplayWidget(99999),
              ChineseMoneyDisplayWidget(999999),
              ChineseMoneyDisplayWidget(996786),
              ChineseMoneyDisplayWidget(9999999), // maxNum 默认值为10000
              ChineseMoneyDisplayWidget(
                9999999,
                maxNum: 10000001,
              ),
              ChineseMoneyDisplayWidget(
                9999999.97,
                maxNum: 10000001,
                integerColor: Colors.blue,
                integerFontsize: 25,
                decimalFontsize: 21,
                currencySymbolColor: Colors.pink,
                tenThousandSymbol: 'w',
                tenThousandSymbolColor: Colors.limeAccent,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

作用如下：

4. 接口

  /// 创立一个新的[ChineseMoneyDisplayWidget]实例
  ///
  /// [price]是要显现的价格，[integerFontsize]和[decimalFontsize]别离表明整数位和小数位的字体大小
  ///
  /// [maxNum]是一个可选参数，表明答应的最大数字，超越此数字将显现[overflowSymbol]
  ///
  /// [overflowSymbol]是一个可选参数，用于表明超越最大数字时显现的符号，默以为"-"
  ///
  /// [tenThousandSymbol]是一个可选参数，用于分隔万位的文本，默以为"万"
  ///
  /// [currencySymbol]是一个可选参数，表明钱银符号，默以为""
  ///
  /// [tenThousandSymbolColor]、[currencySymbolColor]、[overflowSymbolColor]是可选参数，
  /// 别离表明万字单位符号、钱银符号和溢出符号的色彩，默以为红色
  const ChineseMoneyDisplayWidget(
    this.price, {
    super.key,
    this.integerFontsize = 18,
    this.decimalFontsize = 15,
    this.tenThousandSymbolSize = 15,
    this.currencySymbolFontsize = 15,
    this.maxNum = 1000000,
    this.overflowSymbol = '-',
    this.tenThousandSymbol = '万',
    this.currencySymbol = '',
    this.tenThousandSymbolColor = Colors.red,
    this.integerColor = Colors.red,
    this.decimalDigitColor = Colors.red,
    this.currencySymbolColor = Colors.red,
    this.overflowSymbolColor = Colors.red,
    this.integerFontWeight = FontWeight.normal,
    this.decimalFontWeight = FontWeight.normal,
    this.tenThousandSymbolWeight = FontWeight.normal,
    this.currencyFontWeight = FontWeight.normal,
  });