Flutter笔记:电商中文货币显示插件Money Display

简介: 实战中的电商应用货币显示有一些繁琐,比如需要在数字中插入逗号分隔符、需要判断金额数量级,为大的数量级添加单位(比如超过10000时添加万字),处理超出最大金额显示,考虑数位的保留,处理小数点后多余的0,等等。为此我做了一个小模块,用于自动处理这些问题,没有特殊需求的情况下,可以仅仅传入一个double数。如果有需要,你可以通过考虑传入不同参数以指定更多的样式。

Flutter笔记电商中文货币显示插件 Money Display


作者李俊才 (jcLee95)https://blog.csdn.net/qq_28550263

邮箱 :291148484@163.com

本文地址https://blog.csdn.net/qq_28550263/article/details/133814670


目 录



1. 概述与入门

Money Display就是一款用于中文货币显示的插件。在Money Display中你可以定制每一个中文货币构成部分的样式、符号:

项目

项目主页(pub.dev):https://pub.dev/packages/money_display

仓库地址(Github):https://github.com/jacklee1995/flutter_money_display/blob/master/README.md

仓库地址(国内):http://thispage.tech:9680/jclee1995/flutter_money_display/-/blob/master/README_CN.md

概述

在电商项目中,经常需要显示货币比如:

实战中的电商应用货币显示有一些繁琐,比如需要在数字中插入逗号分隔符、需要判断金额数量级,为大的数量级添加单位(比如超过10000时添加万字),处理超出最大金额显示,考虑数位的保留,处理小数点后多余的0,等等。

我为此做了一个小模块,用于自动处理这些问题,没有特殊需求的情况下,可以仅仅传入一个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. 处理小数位:如果价格有小数部分,它将被显示,小数部分会根据 smallFontsizedecimalDigitColor 进行样式设置。
  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,
  });
目录
相关文章
|
2月前
|
Dart Android开发
鸿蒙Flutter实战:05-使用第三方插件
在鸿蒙Flutter开发中,使用原生功能需借助插件。可自编原生ArkTS代码或采用第三方插件。自编代码通过PlatformView或MethodChannel实现;第三方插件需确保适配鸿蒙,否则须配置替代插件或自行开发。
92 1
鸿蒙Flutter实战:05-使用第三方插件
|
4天前
|
Dart
Flutter 快捷键 和 插件使用
Flutter 快捷键 和 插件使用
Flutter 快捷键 和 插件使用
|
28天前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
40 2
|
2月前
|
编解码 Dart API
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件,实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法,并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`,使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料,帮助开发者更好地理解和实现这一过程。
115 0
|
4月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
576 5
|
4月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记:Widgets Easier组件库-使用隐私守卫
Flutter笔记:Widgets Easier组件库-使用隐私守卫
57 2
|
4月前
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
92 2
|
4月前
|
数据采集 API 调度
Flutter笔记:关于SchedulerBinding
Flutter笔记:关于SchedulerBinding
100 1
|
4月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
63 1
|
4月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
130 0