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

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});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 默认值为10000ChineseMoneyDisplayWidget(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,});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/133562.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络初识(JAVA EE)

文章目录 一、网络发展史二、网络通信基础三、协议分层四、封装和分用 一、网络发展史 独立模式:计算机之间相互独立,每个终端都各自持有客户数据,且当处理一个业务时,按照业务流程进行 网络互连:将多台计算机连接在一…

QMidi Pro for Mac:打造您的专属卡拉OK体验

你是否曾经厌倦于在KTV里与朋友们争夺麦克风?是否想要在家中享受自定义的卡拉OK体验?现在,有了QMidi Pro for Mac,一切变得简单而愉快! QMidi Pro是一款功能强大的卡拉OK播放器,专为Mac用户设计。它充分利…

java - 设计模式 - 状态模式

文章目录 前言java - 设计模式 - 状态模式1. 概述2. 作用3. 示例 前言 如果您觉得有用的话,记得给博主点个赞,评论,收藏一键三连啊,写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差,实在白嫖的话&#xf…

如何通过 NFTScan API 按照 NFT 合约地址检索数据?

在当前 NFT 市场还在不断扩张的背景下,各种 NFT 项目依旧是井喷式涌现,投资者和开发者都面临获取项目全貌数据的困境。公链上提取和处理大量的数据既费时又费力,缺乏全面的信息支持,将难以深入判断一个 NFT 项目的真实情况&#x…

解决Win10电脑无线网卡的移动热点无法开启问题

一、目的 利用无线网卡连接网络,然后又用无线网卡通过移动热点分享该网络。 移动热点,简单地说,就是将台式机或笔记本的 Internet 连接转化成 WIFI 信号以供移动设备无线上网的功能,硬件前提是电脑须安装有无线网卡。 二、问题 …

Java架构师系统架构设计确定系统边界

目录 2 初始业务场景分析2.1 业务的需求分析重要性2.2 全面深入的理解业务从零到一从无到有2.3 需求分析 3 系统和系统边界定义3.1 为什么要确定系统边界 3 需求分析明确系统边界4 高层架构设计4.1 技术架构4.2 部署架构4.3 安全架构4.4 存储架构 5 高层架构设计确定系统边界5.…

vscode中注释多行bash脚本

选择你要注释的行,右击所选的行,从命令调色板中选择添加行注释。 选择后,所选的行将被注释为#,如下图所示。 选择你想取消注释的行,在所选行上点击右键,从命令调色板中选择删除区块注释,就可以从…

01-10 周二 PyCharm远程Linux服务器配置进行端点调试

01-10 周二 PyCharm远程Linux服务器配置 时间版本修改人描述2023年1月10日14:04:15V0.1宋全恒新建文档2023年2月6日11:03:45V0.2宋全恒添加快捷指令别名的实现方便虚拟环境的切换 简介 使用 PyCharm,您可以使用位于另一台计算机(服务器)上的解释器调试应用程序。 …

蜘蛛飞机大战

欢迎来到程序小院 蜘蛛飞机大战 玩法: 点击开始游戏,鼠标移动控制方向,可自由移动飞机打剁掉方飞机下落的子弹并打掉敌方飞机,三次生命,不同关卡不同奖励,快去闯关吧^^。开始游戏https://www.ormcc.com/pl…

为什么手机会莫名多出许多软件?

许多手机用户都曾遭遇过这样的问题,他们在使用手机的过程中,突然发现手机屏幕上出现了一些未知的软件。这些软件并非他们主动下载的,但它们却显现在屏幕上。这些软件从何而来? 其实,这些软件往往是在浏览网页、阅读小…

安装JAVA 依赖环境 Maven 教程

一、下载链接与Tips Maven 过去版本下载传送门:( Java 8 兼容 Java 7,即 Java 8 的 JDK 能运行 3.8.8 以下的 Maven) Maven Releases History Download 点击 release notes 点击 available for download. 选择 bin 的安装包 然…

交叉熵Loss多分类问题实战(手写数字)

1、import所需要的torch库和包 2、加载mnist手写数字数据集,划分训练集和测试集,转化数据格式,batch_size设置为200 3、定义三层线性网络参数w,b,设置求导信息 4、初始化参数,这一步比较关键,…