前言

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
本次项目以高铁购票业务为核心，采用Flutter框架搭建跨平台移动端，深度整合各类实用三方库完成网络请求、状态管理、页面适配、本地存储、选择器、图片缓存等核心功能；同时基于鸿蒙开发实现HarmonyOS原生版本适配，一套业务逻辑双端落地。

全文提供可直接跟着做的详细分步教程，从环境搭建、项目创建、三方库引入、页面编码、业务逻辑开发，到鸿蒙工程创建、页面复刻、双端联调、打包运行全覆盖，你按照步骤一步步操作，即可完整完成整套高铁购票系统项目实践。

一、项目整体技术架构

1.1 技术栈组成

• 跨平台端：Flutter 3.10+ + Dart
• 核心支撑：Flutter主流三方库（网络、状态管理、适配、存储、选择器等）
• 原生端：鸿蒙HarmonyOS NEXT + ArkTS + ArkUI
• 业务支撑：本地模拟JSON接口、车次查询、站点切换、日期选择、余票展示、订单管理、本地记录存储

1.2 系统功能模块

1. 用户基础模块：简单登录、个人中心
2. 购票核心模块：出发地/目的地切换、出行日期选择、车次列表查询
3. 订单模块：座位选择、订单生成、订单记录本地保存
4. 双端适配模块：Flutter跨平台适配、鸿蒙原生界面同业务复刻

二、开发环境搭建（Flutter + 鸿蒙）

2.1 Flutter开发环境搭建步骤

1. 下载官方Flutter SDK，解压后配置系统环境变量，把flutter/bin加入系统PATH。
2. 安装开发工具：Android Studio / VS Code，安装Flutter、Dart官方插件。
3. 打开终端执行校验命令：

flutter doctor

按提示补全Android SDK、平台工具，无红色报错即为环境就绪。
4. 准备安卓模拟器或安卓真机，用于后续运行调试。

2.2 鸿蒙开发环境搭建步骤

1. 下载安装DevEco Studio鸿蒙官方开发工具。
2. 安装HarmonyOS NEXT SDK，选择API 12及以上版本。
3. 创建鸿蒙手机模拟器，启动模拟器保证可正常预览界面。
4. 确认工具无SDK版本报错、模拟器可正常联网启动。

三、Flutter项目创建与三方库集成

3.1 创建Flutter新项目

1. 终端执行创建命令：

flutter create train_ticket_app
cd train_ticket_app

2. 用Android Studio或VS Code打开该项目，清空默认示例冗余代码。

3.2 引入项目必备三方库

打开项目根目录pubspec.yaml，在dependencies中添加以下常用三方库，适配高铁购票全业务场景：

dependencies:
  flutter:
    sdk: flutter
  # 网络请求 对接车次接口
  dio: ^5.4.0
  # 全局状态管理
  provider: ^6.1.1
  # 屏幕适配 多机型统一布局
  flutter_screenutil: ^5.9.0
  # 本地数据持久化 保存订单、用户信息
  shared_preferences: ^2.2.2
  # 日期、站点选择器
  flutter_picker: ^2.1.0
  # 网络图片缓存
  cached_network_image: ^3.3.0
  # 时间、金额格式化
  intl: ^0.19.0

保存后终端执行依赖安装：

flutter pub get

3.3 基础工具类封装

1. 封装Dio网络请求工具类，统一请求地址、超时、拦截器。
2. 封装屏幕适配初始化代码，在入口页面全局注入。
3. 封装本地存储工具类，封装订单增删查方法。

四、Flutter高铁购票系统页面开发

4.1 项目目录结构规划

lib/
├── main.dart        # 项目入口
├── provider/        # 状态管理
├── utils/          # 工具类
├── pages/          # 所有业务页面
│   ├── home.dart   # 购票首页
│   ├── train_list.dart # 车次列表页
│   ├── order.dart  # 订单页面
│   └── mine.dart   # 个人中心

4.2 核心页面分步开发

1. 首页开发
   集成flutter_picker实现城市选择、日期选择；布局实现出发地—目的地互换按钮；点击查询按钮通过dio请求模拟车次接口。

2. 车次列表页
   接收首页传参，展示不同时间段高铁车次、历时、票价、余票状态；使用cached_network_image展示线路配图。

3. 座位选择&订单确认页
   利用intl格式化票价与时间；点击选座后生成临时订单，通过provider全局共享订单数据。

4. 订单记录&个人中心
   通过shared_preferences把订单本地持久化，存入后可随时读取历史购票记录。

4.3 状态管理配置

使用Provider全局管理选中车次、出发站点、到达站点、出行日期等全局变量，跨页面共享数据，无需重复传参。

4.4 Flutter项目运行调试

连接真机/启动模拟器，执行：

flutter run

测试站点切换、日期选择、车次查询、订单保存全部业务流程，修复布局适配、接口请求异常问题。

五、鸿蒙开发：高铁购票系统原生复刻

5.1 鸿蒙新项目创建

1. 打开DevEco Studio，新建Empty Ability工程。
2. 项目命名为HarmonyTrainTicket，选择API12、ArkTS开发语言。
3. 等待工程初始化完成，默认目录结构保持不变。

5.2 鸿蒙核心页面业务复刻

1. 进入entry/src/main/ets/pages/Index.ets，编写ArkTS代码。
2. 复刻Flutter端核心UI：顶部标题、城市选择区、日期展示、车次票价卡片、查询与下单按钮。
3. 使用ArkUI组件Column、Row、Text、Button搭建布局，实现城市互换、点击查询、订单状态变更交互。
4. 适配鸿蒙屏幕尺寸，调整圆角、阴影、边距，保证视觉效果和Flutter端一致。

5.3 鸿蒙模拟器运行预览

1. 启动鸿蒙手机模拟器。
2. 点击运行按钮，编译HAP并安装到模拟器。
3. 验证页面布局、点击交互、状态更新全部正常，完成鸿蒙端业务落地。

六、Flutter+三方库+鸿蒙双端项目整合

1. 统一双端业务逻辑：站点规则、日期格式、票价展示规则保持一致。
2. 统一UI设计规范：主色调、按钮样式、卡片圆角统一风格。
3. 分别完成Flutter端打包APK、鸿蒙端打包HAP，实现双端可安装部署。

七、项目总结

本项目完整依托Flutter做跨平台开发，依靠三方库快速解决网络、状态管理、适配、存储、选择器等通用难题，再结合鸿蒙开发做原生同业务适配，既掌握了Flutter工程搭建与三方库集成用法，又熟悉了鸿蒙ArkTS页面开发流程，是移动端跨平台+鸿蒙原生综合实战经典项目。