鸿蒙flutter第三方库适配 - 汇率换算器

见山是山-见水是水2026-04-13 8:43

汇率换算器应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

一、项目概述

运行效果图




1.1 应用简介

汇率换算器是一款专业的货币换算工具应用，支持实时汇率查询、多币种换算、汇率走势图、离线汇率缓存等功能。应用以清新的青色为主色调，象征全球金融的流动与互联。涵盖换算、汇率、走势、设置四大模块，让用户轻松掌握全球货币动态。

应用采用实时汇率数据源，支持20种主流货币的快速换算，提供历史汇率走势图表，帮助用户了解汇率变化趋势。无论是出境旅游、海淘购物还是外汇投资，都能提供准确的汇率参考。

1.2 核心功能

功能模块 功能描述 实现方式
实时换算 输入金额即时换算，支持双向换算 实时计算
多币种支持 支持20种主流货币，可快速切换 货币库
汇率查询 查看各币种对人民币的实时汇率 数据接口
关注汇率 收藏常用汇率对，快速查看涨跌 收藏功能
走势图表 30天历史汇率走势，直观展示趋势 图表绘制
统计数据 最高、最低、平均汇率统计 数据分析
离线缓存 无网络时使用缓存数据 本地存储
汇率提醒 汇率波动超过阈值时推送通知 通知系统

1.3 支持货币列表

序号 货币代码 货币名称 货币符号 国旗
1 CNY 人民币 ¥ 🇨🇳
2 USD 美元 $ 🇺🇸
3 EUR 欧元 € 🇪🇺
4 GBP 英镑 £ 🇬🇧
5 JPY 日元 ¥ 🇯🇵
6 KRW 韩元 ₩ 🇰🇷
7 HKD 港币 HK$ 🇭🇰
8 TWD 新台币 NT$ 🇹🇼
9 SGD 新加坡元 S$ 🇸🇬
10 AUD 澳元 A$ 🇦🇺
11 CAD 加元 C$ 🇨🇦
12 CHF 瑞士法郎 Fr 🇨🇭
13 THB 泰铢 ฿ 🇹🇭
14 MYR 马来西亚林吉特 RM 🇲🇾
15 INR 印度卢比 ₹ 🇮🇳
16 RUB 俄罗斯卢布 ₽ 🇷🇺
17 NZD 新西兰元 NZ$ 🇳🇿
18 PHP 菲律宾比索 ₱ 🇵🇭
19 VND 越南盾 ₫ 🇻🇳
20 IDR 印尼盾 Rp 🇮🇩

1.4 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
网络检测 connectivity_plus >= 5.0.0
数据缓存 shared_preferences >= 2.2.0
分享功能 share_plus >= 7.2.0
通知提醒 flutter_local_notifications >= 17.0.0
目标平台 鸿蒙OS / Android / iOS API 21+

1.5 项目结构

复制代码 
lib/
└── main_currency_converter.dart
    ├── CurrencyConverterApp       # 应用入口
    ├── Currency                    # 货币模型
    ├── ExchangeRate                # 汇率模型
    ├── RateHistory                 # 汇率历史模型
    ├── CurrencyConverterHomePage   # 主页面（底部导航）
    ├── _buildConverterPage         # 换算页
    ├── _buildRatesPage             # 汇率页
    ├── _buildChartPage             # 走势页
    ├── _buildSettingsPage          # 设置页
    └── RateChartPainter            # 汇率走势图绘制器

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

CurrencyConverterHomePage
换算页
汇率页
走势页
设置页
货币选择器
金额输入
换算结果
关注汇率列表
热门货币列表
货币对选择
走势图表
统计数据
汇率引擎

RateEngine
换算器

Converter
数据管理器

DataManager
通知管理器

NotificationManager
Currency

货币数据
ExchangeRate

汇率数据
RateHistory

历史数据
Settings

设置数据

2.2 类图设计

uses
manages
manages
references
CurrencyConverterApp
+Widget build()
Currency
+String code
+String name
+String symbol
+String flag
+double rate
+copyWith()
ExchangeRate
+String fromCurrency
+String toCurrency
+double rate
+DateTime updateTime
+double change
+double changePercent
+bool isUp
+bool isDown
+bool isStable
RateHistory
+DateTime date
+double rate
CurrencyConverterHomePage
+int currentIndex
+Currency fromCurrency
+Currency toCurrency
+List<Currency> currencies
+List<ExchangeRate> favoriteRates
+List<RateHistory> rateHistory
+bool isOffline
+double convert()
+void swapCurrencies()
+void refreshRates()

2.3 页面导航流程

换算
汇率
走势
设置
应用启动
换算页
底部导航
汇率页
走势页
设置页
选择源货币
货币选择弹窗
选择目标货币
输入金额
实时换算
显示结果
点击交换
交换货币
查看关注汇率
点击汇率卡
添加关注
选择货币对
保存关注
查看走势图
切换货币对

2.4 汇率换算流程

数据管理器 换算器 换算页 用户 数据管理器 换算器 换算页 用户 输入金额 获取汇率数据 查询汇率 返回汇率 计算换算结果 返回结果 显示换算金额 点击交换按钮 交换货币 重新计算 返回新结果 显示新结果

三、核心模块设计

3.1 数据模型设计

3.1.1 货币模型 (Currency)
dart 复制代码 
class Currency {
  final String code;
  final String name;
  final String symbol;
  final String flag;
  final double rate;

  const Currency({
    required this.code,
    required this.name,
    required this.symbol,
    required this.flag,
    this.rate = 1.0,
  });

  Currency copyWith({double? rate}) {
    return Currency(
      code: code,
      name: name,
      symbol: symbol,
      flag: flag,
      rate: rate ?? this.rate,
    );
  }
}
3.1.2 汇率模型 (ExchangeRate)
dart 复制代码 
class ExchangeRate {
  final String fromCurrency;
  final String toCurrency;
  final double rate;
  final DateTime updateTime;
  final double change;
  final double changePercent;

  const ExchangeRate({
    required this.fromCurrency,
    required this.toCurrency,
    required this.rate,
    required this.updateTime,
    this.change = 0,
    this.changePercent = 0,
  });

  bool get isUp => change > 0;
  bool get isDown => change < 0;
  bool get isStable => change == 0;
}
3.1.3 汇率历史模型 (RateHistory)
dart 复制代码 
class RateHistory {
  final DateTime date;
  final double rate;

  const RateHistory({
    required this.date,
    required this.rate,
  });
}
3.1.4 货币使用分布

35% 20% 15% 12% 10% 8% 货币换算使用分布示例 美元 USD 欧元 EUR 日元 JPY 港币 HKD 英镑 GBP 其他

3.2 页面结构设计

3.2.1 主页面布局

CurrencyConverterHomePage
IndexedStack
换算页
汇率页
走势页
设置页
NavigationBar
换算 Tab
汇率 Tab
走势 Tab
设置 Tab

3.2.2 换算页结构

换算页
SliverAppBar
换算卡片
快捷金额
更新信息
源货币输入
交换按钮
目标货币显示
汇率信息
货币选择
金额输入
货币选择
结果显示

3.2.3 汇率页结构

汇率页
关注汇率列表
热门货币列表
汇率卡片
货币对信息
当前汇率
涨跌幅度
货币列表项
国旗图标
货币名称
汇率显示

3.2.4 走势页结构

走势页
货币对选择器
汇率摘要
走势图表
统计数据
源货币
目标货币
当前汇率
日涨跌
历史曲线
数据点标记
最高汇率
最低汇率
平均汇率

3.3 汇率换算逻辑

获取输入金额
获取源货币汇率
获取目标货币汇率
计算换算结果
返回结果
换算公式
结果 = 金额 × (目标汇率 / 源汇率)

换算公式：

换算结果 = 金额 × 目标货币汇率 源货币汇率 \text{换算结果} = \text{金额} \times \frac{\text{目标货币汇率}}{\text{源货币汇率}} 换算结果=金额×源货币汇率目标货币汇率

3.4 数据更新逻辑

在线
离线
定时器触发
网络状态
请求汇率数据
使用缓存数据
解析响应数据
更新本地汇率
保存到缓存
更新UI
读取缓存数据
显示更新时间

四、UI设计规范

4.1 配色方案

应用以清新的青色为主色调，象征全球金融的流动与互联：

颜色类型 色值 用途
主色 #00BCD4 (Cyan) 导航、主题元素、按钮
主色容器 #E0F7FA 卡片背景、进度环背景
辅助色 #0097A7 强调元素
第三色 #4DD0E1 次要元素
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 信息卡片
上涨色 #4CAF50 汇率上涨
下跌色 #F44336 汇率下跌
稳定色 #9E9E9E 汇率持平

4.2 汇率状态配色

状态 色值 视觉效果
上涨 #4CAF50 绿色
下跌 #F44336 红色
持平 #9E9E9E 灰色

4.3 字体规范

元素 字号 字重 颜色
页面标题 20px Bold 主色
换算金额 28px Bold 主色
货币代码 18px Bold #000000
货币名称 14px Regular #666666
汇率数值 20px Bold #000000
涨跌幅 12px Medium 状态色
时间标签 12px Regular #999999

4.4 组件规范

4.4.1 换算卡片布局
复制代码 
┌─────────────────────────────────────┐
│                                     │
│  🇨🇳  CNY - 人民币          ¥1.00  ›│
│                                     │
│            [ ⇅ 交换 ]               │
│                                     │
│  🇺🇸  USD - 美元            $0.1389 │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ ℹ️ 1 CNY = 0.1389 USD       │   │
│  └─────────────────────────────┘   │
│                                     │
└─────────────────────────────────────┘
4.4.2 汇率卡片
复制代码 
┌─────────────────────────────────────┐
│  🇨🇳 CNY/USD                        │
│  1 CNY = 0.1389 USD                 │
│                          0.1389     │
│                          ▲ +0.87%   │
└─────────────────────────────────────┘
4.4.3 走势图表
复制代码 
┌─────────────────────────────────────┐
│  历史走势                            │
│                                     │
│    0.145 ┤                          │
│          │    ╭─╮                   │
│    0.140 ┤   ╭╯  ╰╮   ╭╮           │
│          │  ╭╯    ╰──╯  ╰──         │
│    0.135 ┤ ╭╯                      │
│          │╭╯                        │
│    0.130 ┼───────────────────────── │
│         01/01    01/15    01/30    │
└─────────────────────────────────────┘
4.4.4 货币选择弹窗
复制代码 
┌─────────────────────────────────────┐
│  选择源货币                      ✕  │
│  ─────────────────────────────────  │
│  🇨🇳 CNY - 人民币                    │
│      1 CNY = 1.0000 CNY         ✓  │
│  ─────────────────────────────────  │
│  🇺🇸 USD - 美元                      │
│      1 CNY = 0.1389 USD             │
│  ─────────────────────────────────  │
│  🇪🇺 EUR - 欧元                      │
│      1 CNY = 0.1278 EUR             │
│  ─────────────────────────────────  │
│  🇬🇧 GBP - 英镑                      │
│      1 CNY = 0.1096 GBP             │
└─────────────────────────────────────┘
4.4.5 统计数据卡片
复制代码 
┌─────────────────────────────────────┐
│  统计数据                            │
│                                     │
│    最高        最低        平均     │
│   0.1456      0.1321      0.1389   │
│    🟢          🔴          🔵       │
└─────────────────────────────────────┘

五、核心功能实现

5.1 汇率换算实现

dart 复制代码 
double _convert(double amount) {
  final fromRate = _currencies.firstWhere((c) => c.code == _fromCurrency.code).rate;
  final toRate = _currencies.firstWhere((c) => c.code == _toCurrency.code).rate;
  return amount / fromRate * toRate;
}

5.2 货币交换实现

dart 复制代码 
void _swapCurrencies() {
  setState(() {
    final temp = _fromCurrency;
    _fromCurrency = _toCurrency;
    _toCurrency = temp;
  });
}

5.3 汇率刷新实现

dart 复制代码 
void _refreshRates() {
  _refreshController.forward().then((_) {
    _refreshController.reset();
  });

  setState(() {
    final random = Random();
    _currencies = _currencies.map((c) {
      if (c.code != 'CNY') {
        final change = (random.nextDouble() - 0.5) * 0.01;
        return c.copyWith(rate: c.rate * (1 + change));
      }
      return c;
    }).toList();
    _lastUpdateTime = DateTime.now();
  });
}

5.4 走势图表绘制实现

dart 复制代码 
class RateChartPainter extends CustomPainter {
  final List<RateHistory> data;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    if (data.isEmpty) return;

    final rates = data.map((h) => h.rate).toList();
    final maxRate = rates.reduce(max);
    final minRate = rates.reduce(min);
    final range = maxRate - minRate;

    final linePaint = Paint()
      ..color = color
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    final path = Path();
    for (int i = 0; i < data.length; i++) {
      final x = (i / (data.length - 1)) * size.width;
      final y = size.height - ((data[i].rate - minRate) / range) * size.height * 0.8 - size.height * 0.1;

      if (i == 0) {
        path.moveTo(x, y);
      } else {
        path.lineTo(x, y);
      }
    }

    canvas.drawPath(path, linePaint);
  }
}

5.5 离线缓存实现

dart 复制代码 
void _saveToCache() async {
  final prefs = await SharedPreferences.getInstance();
  final ratesJson = jsonEncode(_currencies.map((c) => {
    return {'code': c.code, 'rate': c.rate};
  }).toList());
  await prefs.setString('cached_rates', ratesJson);
  await prefs.setString('cache_time', DateTime.now().toIso8601String());
}

Future<void> _loadFromCache() async {
  final prefs = await SharedPreferences.getInstance();
  final ratesJson = prefs.getString('cached_rates');
  if (ratesJson != null) {
    final List<dynamic> rates = jsonDecode(ratesJson);
    // 恢复汇率数据
  }
}

六、交互设计

6.1 换算流程

换算器 货币选择器 换算页 用户 换算器 货币选择器 换算页 用户 输入金额 计算换算 返回结果 显示结果 点击货币 打开选择器 显示货币列表 选择货币 返回选择 重新计算 返回新结果

6.2 汇率查看流程

点击卡片
添加关注
下拉刷新
进入汇率页
加载关注列表
显示汇率卡片
用户操作
跳转换算页
选择货币对
更新汇率
保存关注
请求最新数据

6.3 走势查看流程

更换货币
选择货币对
加载历史数据
绘制走势图
计算统计
显示结果
切换货币对

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 2024-04-07 2024-04-14 2024-04-21 2024-04-28 基础UI框架 换算功能实现 汇率查询功能 走势图表功能 离线缓存优化 更多货币支持 汇率提醒功能 多数据源支持 汇率预测功能 投资组合管理 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 汇率换算器开发计划

7.2 功能扩展建议

7.2.1 数据源扩展

数据功能：

  • 接入多个汇率数据源
  • 数据源自动切换
  • 数据准确性校验
  • 历史数据回溯
7.2.2 高级分析功能

分析功能：

  • 汇率趋势预测
  • 最佳换汇时机提示
  • 汇率波动分析报告
  • 货币强弱对比
7.2.3 投资辅助功能

投资功能：

  • 外汇投资组合管理
  • 盈亏计算器
  • 风险评估工具
  • 投资记录追踪

八、注意事项

8.1 开发注意事项

  1. 数据准确性：汇率数据需从可靠数据源获取

  2. 更新频率：合理设置更新间隔，避免频繁请求

  3. 离线支持：确保离线时仍可使用基本功能

  4. 精度处理：注意浮点数计算精度问题

  5. 时区处理：正确处理不同时区的时间显示

8.2 常见问题

问题 原因 解决方案
汇率不准 数据源延迟 多数据源交叉验证
换算误差 浮点精度 使用高精度计算库
更新失败 网络问题 使用缓存数据
时区错误 时区未处理 统一使用UTC时间
货币缺失 数据源限制 扩展数据源

8.3 使用技巧

💱 汇率换算器使用技巧 💱

换算技巧

  • 使用快捷金额按钮快速换算
  • 点击交换按钮快速切换货币
  • 长按货币可设为默认货币

汇率关注

  • 收藏常用货币对
  • 关注汇率涨跌趋势
  • 设置汇率变动提醒

走势分析

  • 查看历史走势判断趋势
  • 关注统计数据辅助决策
  • 选择合适时机换汇

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Android API 21+
iOS 12.0+
网络权限 必需

9.2 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_currency_converter.dart --web-port 8148

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_currency_converter.dart

# 运行到Android设备
flutter run -d android lib/main_currency_converter.dart

# 代码分析
flutter analyze lib/main_currency_converter.dart

9.3 依赖配置

在 pubspec.yaml 中添加以下依赖（完整版需要）：

yaml 复制代码 
dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^5.0.2
  shared_preferences: ^2.2.2
  share_plus: ^7.2.1
  flutter_local_notifications: ^17.2.2
  http: ^1.1.0
  intl: ^0.19.0

十、总结

汇率换算器应用通过实时汇率数据、便捷的换算操作、直观的走势图表，让用户轻松掌握全球货币动态。应用支持20种主流货币，提供换算、汇率查询、走势分析三大核心功能，满足出境旅游、海淘购物、外汇投资等多种场景需求。

核心功能涵盖实时换算、多币种支持、汇率查询、关注汇率、走势图表、统计数据、离线缓存、汇率提醒八大模块。用户可以快速换算任意货币组合，查看实时汇率和涨跌情况，分析历史走势判断趋势，从而做出更明智的换汇决策。

应用采用 Material Design 3 设计规范，以清新的青色为主色调，象征全球金融的流动与互联。通过本应用，希望能够为用户提供准确便捷的汇率服务，让跨境金融活动更加轻松。

汇率换算器------全球货币，尽在掌握

相关推荐
麒麟ZHAO2 小时前
Flutter 框架跨平台鸿蒙开发 - 智能衣柜衣物换季
flutter·华为·harmonyos
盐真卿2 小时前
华为数通 | VRRP负载分担与网关冗余实验：主备切换+流量分流，企业高可用网络实战
网络·华为
014-code2 小时前
Redis 删除缓存失败怎么办？重试、死信、补偿的工程化方案
数据库·redis·缓存
rannn_1112 小时前
【Redis|高级篇1】分布式缓存|持久化（RDB、AOF）、主从集群、哨兵、分片集群
java·redis·分布式·后端·缓存
不爱吃糖的程序媛2 小时前
鸿蒙三方库适配读懂 `thirdparty/AES/.gitignore`：哪些文件不该进 Git？
git·elasticsearch·harmonyos
PD我是你的真爱粉2 小时前
Redis 持久化、过期删除、淘汰策略与内存碎片全解析
java·redis·bootstrap
想你依然心痛2 小时前
HarmonyOS 5.0教育科技开发实战：构建AI个性化学习与分布式协同教育系统
人工智能·学习·harmonyos
斌味代码2 小时前
Redis 分库分表实战：从垂直拆分到水平扩容完整记录
数据库·redis·bootstrap
麒麟ZHAO2 小时前
鸿蒙flutter第三方库适配 - 实时天气查询
flutter·华为·harmonyos
热门推荐
01一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛02GitHub 镜像站点032026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程08Oh My Codex 快速使用指南09免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手10CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南