Flutter笔记:发布一个电商中文货币显示插件Money Display
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
作者李俊才 jcLee95https://blog.csdn.net/qq_28550263
邮箱 291148484@163.com
本文地址https://blog.csdn.net/qq_28550263/article/details/133814670
目 录
1. 概述与入门
Money Display就是一款用于中文货币显示的插件。在Money Display中你可以定制每一个中文货币构成部分的样式、符号
项目
项目主页pub.devhttps://pub.dev/packages/money_display
仓库地址Githubhttps://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”并提供了一些自定义选项来满足不同的需求。
以下是本模块显示货币的大概逻辑
-
构造函数参数
ChineseMoneyDisplayWidget
构造函数接受多个参数包括货币金额price
以及用于自定义显示的各种选项如整数位字体大小、小数位字体大小、最大数字、溢出符号等。 -
格式化价格
_formatPrice
方法负责将传入的price
格式化为富文本TextSpan
。首先它将价格转换为字符串并使用正则表达式分离整数部分和小数部分。 -
处理大数值如果价格大于等于
maxNum
则显示overflowSymbol
通常是表示无限大的符号。如果价格小于maxNum
则继续处理。 -
处理大于一万的价格如果价格大于一万整数部分会被分隔成整数部分和小数部分如果有的话。如果没有小数部分直接添加 “万” 符号。如果有小数部分将整数部分和小数部分一同显示整数部分后跟 “万” 符号。
-
处理大于一千的价格如果价格大于一千整数部分会被格式化千位之间会添加逗号分隔符。处理方式与上述类似根据是否有小数部分显示整数部分、小数部分和 “万” 符号。
-
处理小于一千的价格对于小于一千的价格整数部分不添加逗号分隔符而是根据是否有小数部分来显示整数部分、小数部分和 “万” 符号。
-
处理小数位如果价格有小数部分它将被显示小数部分会根据
smallFontsize
和decimalDigitColor
进行样式设置。 -
整合文本所有这些文本片段都会被整合到一个
TextSpan
中以便一起显示。 -
构建富文本在
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 默认值为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,
});
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |