汇率换算器应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• connectivity_plus: https://pub.dev/packages/connectivity_plus
• shared_preferences: https://pub.dev/packages/shared_preferences
• share_plus: https://pub.dev/packages/share_plus
• flutter_local_notifications: https://pub.dev/packages/flutter_local_notifications

一、项目概述

运行效果图

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 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 汇率换算流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 货币模型 (Currency)

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)

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)

class RateHistory {
  final DateTime date;
  final double rate;

  const RateHistory({
    required this.date,
    required this.rate,
  });
}

3.1.4 货币使用分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 换算页结构

3.2.3 汇率页结构

3.2.4 走势页结构

3.3 汇率换算逻辑

换算公式：

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

3.4 数据更新逻辑

---

四、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 汇率换算实现

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 货币交换实现

void _swapCurrencies() {
  setState(() {
    final temp = _fromCurrency;
    _fromCurrency = _toCurrency;
    _toCurrency = temp;
  });
}

5.3 汇率刷新实现

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 走势图表绘制实现

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 离线缓存实现

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 后续版本规划

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 运行命令

# 查看可用设备
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 中添加以下依赖（完整版需要）：

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

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

---