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.mzph.cn/news/105198.shtml

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

相关文章

Pulsar 之架构,客户端以及多区域容灾

Pulsar 之架构,客户端以及多区域容灾 架构BrokersClusters元数据存储配置存储区持久存储Apache BookKeeperLedgersLedgers读一致性托管Ledgers 日志存储 Pulsar 代理服务发现 Pulsar client(客户端)客户端设置阶段Reader interface 多区域容灾备份(GEO-REPLICATION)…

Apacheb Shiro 1.2.4反序列化漏洞(CVE-2016-4437)

Apache Shiro 1.2.4反序列化漏洞(CVE-2016-4437) 1 在线漏洞解读: https://vulhub.org/#/environments/shiro/CVE-2016-4437/2 环境搭建 cd /home/kali/vulhub/shiro/CVE-2016-4437启动: sudo docker-compose up -d # 拉取下载并启动sud…

C# 解决从其他地方迁移项目,引用中大多数包是感叹号的问题

当在 Visual Studio 中复制别人的 C# 项目时,遇到许多包冒感叹号的问题通常是因为缺少相关的 NuGet 包或引用不正确导致的。这会在解决方案资源管理器中的引用下显示感叹号。 解决办法如下: 在 Visual Studio 中打开项目。 在解决方案资源管理器中&…

服务器数据恢复-DS5300存储raid5硬盘出现坏道离线的数据恢复案例

服务器数据恢复环境: 某单位一台DS5300存储,1个主机4个扩展柜,组建了2组RAID5(一组27块硬盘,一组23块盘)。27块盘的那组RAID5阵列存放Oracle数据库文件,存储系统一共分了11个卷。 服务器故障&a…

Unity基础课程之物理引擎3-碰撞检测案例-吃金币并加分显在UI文本框上

业务逻辑💼: 这个脚本的主要功能是用于显示和更新主角的得分。在游戏中,玩家需要吃到金币来增加分数,而这个脚本就是负责将得分的变化实时显示在屏幕上的。 程序逻辑💻: 1️⃣首先,在脚本的开始…

【微服务部署】七、使用Docker安装Nginx并配置免费的SSL证书步骤详解

SSL(Secure Socket Layer,安全套接字层)证书是一种数字证书,用于加密网站与访问者之间的数据传输。SSL证书是网站安全和可靠性的重要保证,是建立信任和保护用户隐私的重要手段。其作用可以总结为以下几点: …

NginxWebUI runCmd 远程命令执行漏洞复现 [附POC]

文章目录 NginxWebUI runCmd 远程命令执行漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 NginxWebUI runCmd 远程命令执行漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内的相…

【机器学习】sklearn对数据预处理

文章目录 数据处理步骤观察数据数据无量纲化缺失值处理处理分类型特征处理连续型特征 数据处理步骤 数据无量纲化缺失值处理处理分类型特征:编码与哑变量处理连续型特征:二值化与分段 观察数据 通过pandas读取数据,通过head和info方法大致查…

【算法|动态规划No.18】leetcode718. 最长重复子数组

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 🍔本专栏旨在提高自己算法能力的同时,记录一下自己的学习过程,希望…

crontab报错/var/spool/cron : Permission denied和 -bash: chattr: command not found

crontab报错/var/spool/cron : Permission denied和 -bash: chattr: command not found 1、第一种情况2、第二种情况3、第三种情况 1、第一种情况 centos7下修改定时任务crontab -e的时候,控制台输出“crontab: installing new crontab”,表示任务添加成…

uniapp打包配置

安卓: 首先不管是什么打包都需要证书,安卓的证书一般都是公司提供或者自己去申请。然后把包名等下图框住的信息填上,点击打包即可。 ios:ios需要使用mac到苹果开发者平台去申请证书,流程可以参考下边的链接 参考链接…

小程序入门——详细教程

🎬 艳艳耶✌️:个人主页 🔥 个人专栏 :《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 生活的理想,为了不断更新自己 ! 1.微信小程序 入门 1.1什么是小程序? 2017年度百度百科十大热词之一 微信小程…

并查集维护集合 ac240食物链

题目&#xff1a; 代码&#xff1a; #include<iostream> using namespace std; const int N50010; int p[N],d[N]; int n,m;int find(int x){if(p[x]!x){ int ufind(p[x]);d[x] d[p[x]];p[x]u;}return p[x]; }int main(){scanf("%d%d",&n,&m);fo…

《3D 数学基础》几何检测-相交性检测

目录 1. 2D直线相交 2. 3D射线相交点 3. 射线和平面的交点 4. 3个平面的交点 5. 射线和圆或者球交点 6. 两个圆或者球是否相交 7. 球和平面的相交性检测 8. 射线和AABB的相交性&#xff08;13.17&#xff09; 9. 射线和三角形的相交性&#xff08;13.16&#xff09; …

简述什么是值传递和引用传递?

1、什么是值传递,什么是引用传递? 值传递(pass by value)是指在调用函数时将实际参数复制一份传递到函数中,这样在函数中如果对参数进行修改,将不会影响到实际参数。 引用传递(pass by reference)是指在调用函数时将实际参数的地址直接传递到函数中,那么在函数中对参数…

softmax激活函数

Softmax激活函数是一种用于多类别分类问题的激活函数&#xff0c;通常用于神经网络的输出层。它将原始分数&#xff08;也称为logits&#xff09;转换为表示概率分布的数值&#xff0c;使得每个类别的概率值都在0和1之间&#xff0c;并且所有类别的概率之和等于1。这使得它适用…

TOR(Top of Rack)

TOR TOR&#xff08;Top of Rack&#xff09;指的是在每个服务器机柜上部署1&#xff5e;2台交换机&#xff0c;服务器直接接入到本机柜的交换机上&#xff0c;实现服务器与交换机在机柜内的互联。虽然从字面上看&#xff0c;Top of Rack指的是“机柜顶部”&#xff0c;但实际T…

在雷电模拟器9上安装magisk并安装LSPosed模块以及其Manager管理器(二)之LSPosed的使用

上一篇已经安装好LSPosed模块及其Manager管理器&#xff0c;参考文章 在雷电模拟器9上安装magisk并安装LSPosed模块以及其Manager管理器&#xff08;一&#xff09;-CSDN博客 安装完成后&#xff0c;在模拟器上出现图标如下&#xff1a; 一、运行LSPosed 二、仓库模块 内容非…

内排序算法

排序算法是面试中常见的问题&#xff0c;不同算法的时间复杂度、稳定性和适用场景各不相同。按照数据量和存储方式可以将排序算法分为 内排序&#xff08;Internal Sorting&#xff09;和 外排序&#xff08;External Sorting&#xff09;。 内排序是指对所有待排序的数据都可…

华为校招机试题- 机器人活动区域-2023年

题目描述: 现有一个机器人,可放置于 M N的网格中任意位置,每个网格包含一个非负整数编号。当相邻网格的数字编号差值的绝对值小于等于 1 时,机器人可在网格间移动 问题:求机器人可活动的最大范围对应的网格点数目。 说明: 1)网格左上角坐标为 (0, 0),右下角坐标为 (m-…