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.rhkb.cn/news/161917.html

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

相关文章

【性能测试】使用JMeter对code论坛进行压力测试

1.项目介绍 项目简介 code 论坛是一个技术交流社区。主要功能有发布帖子,查看帖子,评价帖子,删除帖子,点赞帖子,站内信,个人中心,修改个人信息等。是一个基于 Spring 的前后端分离项目。 项目链…

分享一下微信小程序怎么添加成绩查询插件

微信小程序如何添加成绩查询插件 一、引言 微信小程序是一种方便快捷的应用程序,可以在微信中使用。随着教育的不断发展,学校和家长对于学生的成绩查询需求也越来越高。通过在微信小程序中添加成绩查询插件,可以为学生和家长提供更加便捷的…

微信小程序获取手机号(2023年10月 python版)[无需订阅]

技术栈: 1. 微信开发者工具中的调试基础库版本:3.1.2。 2. 后台:django。 步骤: 1. 首先在后台django项目的定时任务中增加一个下载access_token函数,并把得到的access_token保存在数据库中(其实随便哪里…

正向代理——流量代理

文章目录 流量代理1. 正向代理2. 反向代理3. 流量转发工具4. 实验4.1 实验环境4.2 reGeorg工具 流量代理 1. 正向代理 正向代理是客户端和其他所有服务器(重点:所有)的代理者 2. 反向代理 反向代理是客户端和所要代理的服务器之间的代理。…

嵌入式和 Java选哪个?

今日话题,嵌入式和 Java 走哪个?对于嵌入式领域有浓厚兴趣的人,并不会比Java行业薪资低,处于上中游水平。特别是从2020年开始,嵌入式领域受益于芯片产业的兴起,表现出了强劲的增长势头。薪资水平受多方面因素影响。以…

7款最佳的图片编辑App

无论你是设计师需要调整界面图片大小,还是摄影师需要剪图片,追求完美的比例,还是日常照片,需要P图片,或多或少会有剪图片的需求,如何选择一个简单和轻的剪图软件应用程序,不是一件容易的事情。本…

【Hello Algorithm】暴力递归到动态规划(三)

暴力递归到动态规划(三) 最长公共子序列递归版本动态规划 最长回文串子序列方法一方法二递归版本动态规划 象棋问题递归版本动态规划 咖啡机问题递归版本动态规划 最长公共子序列 这是leetcode上的一道原题 题目连接如下 最长公共子序列 题目描述如下…

kafka安装和使用的入门教程

这篇文章简单介绍如何在ubuntu上安装kafka,并使用kafka完成消息的发送和接收。 一、安装kafka 访问kafka官网Apache Kafka,然后点击快速开始 紧接着,点击Download 最后点击下载链接下载安装包 如果下载缓慢,博主已经把安装包上传…

旧手机热点机改造成服务器方案

如果你也跟我一样有这种想法, 那真的太酷了!!! ok,前提是得有root,不然体验大打折扣 目录 目录 1.做一个能爬墙能走百度直连的热点机(做热点机用) 2.做emby视频服务器 3.做文件服务, 存取文件 4.装青龙面板,跑一些定时任务 5.做远程摄像头监控 6.做web服务器 7.内网穿…

基于springboot的高校科研管理系统(源码+调试+LW)

项目描述 临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据你想解决的问题,今天给…

2023年全网最新 Windows10 搭建 Python 环境教程

目录 一、查看计算机操作系统的位数二、安装Python2.1 下载Python安装包2.2 在Windows 64位系统中安装Python2.3 测试Python是否安装成功 三、Windows环境下安装第2个Python(不同版本) ----不需要安装多个Python版本的读者此小节可以忽略 一、查看计算机操作系统的位数 目前&a…

手机通过WiFi连接调试UR机器人

1.测试物料 1.1ur机器人 https://item.taobao.com/item.htm?spma1z10.1-c.w4004-25069442759.18.2ff56d6bmuxX0Z&id740002623764 1.2 路由器(TPLINK) https://detail.tmall.com/item.htm?abbucket7&id548610924784&ns1&spma21n57.1.…

基于Java的留学生交流互动论坛系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding) 代码参考数据库参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

OJ项目——用户的登录拦截,我是如何实现的?

目录 前言 1、关于Session该如何处理 简单session回顾: 回顾session的setAttribute、getAttribute : 项目中如何做? 2、登陆拦截器实现 自定义拦截器: 自定义拦截: 前言 博主之前也有出过一期关于拦截器的,大…

Stable Diffusion WebUI几种解决手崩溃的方法

1. 添加与手相关负面提示词 如何提价提示词呢? 首先有一个embeddings模型文件bad-hands-5,我们可以去各个大模型网站去搜,我是在C站上面下载的。 附上C站地址:https://civitai.com/ 下载好之后,你需要将文件放入stable-diffusion-webui\embeddings目录中。位置如下所示…

论文阅读之《Learn to see in the dark》

Learning to See in the Dark-CVPR2018 Chen ChenUIUC(伊利诺伊大学厄巴纳-香槟分校) Qifeng Chen, Jia Xu, Vladlen Koltun Intel Labs(英特尔研究院) 文章链接:https://arxiv.org/pdf/1805.01934.pdfhttps://arxiv.org/pdf/1805.01934.p…

从Flink的Kafka消费者看算子联合列表状态的使用

背景 算子的联合列表状态是平时使用的比较少的一种状态,本文通过kafka的消费者实现来看一下怎么使用算子列表联合状态 算子联合列表状态 首先我们看一下算子联合列表状态的在进行故障恢复或者从某个保存点进行扩缩容启动应用时状态的恢复情况 算子联合列表状态主…

UE5 Python脚本自动化Sequence Key帧

前言 码上1024了,给大家分享一个UE5的脚本小功能,UE5中Sequence动态Key功能,这样我们就可以根据我们的数据动态更新了,非常实用,适合刚入门或者小白,接下来我就把整个过程分享给大家。 过程 新建一个工程…

【微信小程序开发】自定义组件以及页面布局设计

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.自定义组件的使用步骤(附实…

Sandboxie+Buster Sandbox Analyzer打造个人沙箱

一、运行环境和需要安装的软件 实验环境:win7_x32或win7_x64 用到的软件:WinPcap_4_1_3.exe、Sandboxie-3-70.exe、Buster Sandbox Analyzer 重点是Sandboxie必须是3.70版本。下载地址:https://github.com/sandboxie-plus/sandboxie-old/blo…