🚀运行效果展示

Flutter框架跨平台鸿蒙开发——快递追踪APP的开发流程

前言

随着移动互联网的快速发展，快递服务已经成为人们日常生活中不可或缺的一部分。实时追踪快递状态、了解物流信息对于用户来说至关重要。为了满足用户的需求，我们基于Flutter框架开发了一款跨平台的快递追踪APP，支持鸿蒙、Android、iOS等多个平台。

本文将详细介绍快递追踪APP的开发流程，包括项目架构设计、核心功能实现、技术选型等方面，希望能为相关开发者提供参考。

应用介绍

应用功能

快递追踪APP是一款功能齐全的快递查询工具，主要提供以下功能：

• 快递单号查询：支持输入快递单号进行追踪
• 快递公司选择：提供多家快递公司的选择，支持自动识别
• 实时物流信息：展示详细的物流轨迹，包括时间、地点和状态
• 追踪历史记录：自动保存查询历史，方便用户快速查看
• 分享功能：支持分享快递信息给他人

技术特点

• 跨平台开发：基于Flutter框架，实现一次开发，多平台运行
• 响应式布局：适配不同屏幕尺寸的设备
• 模块化设计：采用模块化架构，代码结构清晰
• Mock数据支持：内置模拟数据，方便开发和测试
• 本地存储：使用文件存储保存历史记录

核心功能实现及代码展示

1. 项目架构设计

快递追踪APP采用典型的Flutter项目架构，主要包含以下目录结构：

lib/
├── models/           # 数据模型
├── services/         # 服务类
├── pages/            # 页面组件
└── main.dart         # 应用入口

2. 数据模型设计

首先，我们需要定义快递相关的数据模型，包括快递公司信息、物流轨迹和追踪结果等。

2.1 快递模型定义

/// 快递追踪相关模型

/// 快递公司信息
class ExpressCompany {
  /// 公司代码
  final String code;

  /// 公司名称
  final String name;

  const ExpressCompany({required this.code, required this.name});
}

/// 物流轨迹项
class TrackingTrail {
  /// 时间
  final String time;

  /// 状态
  final String status;

  /// 地点
  final String location;

  const TrackingTrail({
    required this.time,
    required this.status,
    this.location = '',
  });
}

/// 快递追踪结果
class ExpressTracking {
  /// 快递单号
  final String trackingNumber;

  /// 快递公司代码
  final String companyCode;

  /// 快递公司名称
  final String companyName;

  /// 最新状态
  final String latestStatus;

  /// 更新时间
  final DateTime updateTime;

  /// 物流轨迹
  final List<TrackingTrail> trackingTrail;

  const ExpressTracking({
    required this.trackingNumber,
    required this.companyCode,
    required this.companyName,
    required this.latestStatus,
    required this.updateTime,
    this.trackingTrail = const [],
  });
}

3. 服务层实现

服务层负责处理快递追踪的核心逻辑，包括API调用、数据处理和历史记录管理等。

3.1 快递服务类

import 'dart:convert';
import 'dart:io';
import 'package:flutter_shili/models/express_model.dart';

/// 快递服务类
///
/// 提供快递追踪、历史记录管理和快递公司列表功能
class ExpressService {
  /// 存储历史记录的文件路径
  static const String _historyFilePath = 'express_tracking_history.json';

  /// 获取快递公司列表
  ///
  /// 返回支持的快递公司列表
  static List<ExpressCompany> getCompanyList() {
    return [
      const ExpressCompany(code: 'auto', name: '自动识别'),
      const ExpressCompany(code: 'sf', name: '顺丰速运'),
      const ExpressCompany(code: 'sto', name: '申通快递'),
      const ExpressCompany(code: 'yt', name: '圆通速递'),
      const ExpressCompany(code: 'yd', name: '韵达快递'),
      const ExpressCompany(code: 'zto', name: '中通快递'),
      const ExpressCompany(code: 'ems', name: 'EMS'),
      const ExpressCompany(code: 'jd', name: '京东物流'),
      const ExpressCompany(code: 'tt', name: '天天快递'),
      const ExpressCompany(code: 'deppon', name: '德邦物流'),
    ];
  }

  /// 追踪快递
  ///
  /// [trackingNumber] 快递单号
  /// [companyCode] 快递公司代码
  ///
  /// 返回追踪结果
  static Future<ExpressTracking> trackPackage({
    required String trackingNumber,
    required String companyCode,
  }) async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(seconds: 1));

    // 模拟数据
    final companyName = _getCompanyNameByCode(companyCode);
    final now = DateTime.now();

    // 生成模拟的物流轨迹
    final trail = _generateMockTrackingTrail(now);

    return ExpressTracking(
      trackingNumber: trackingNumber,
      companyCode: companyCode,
      companyName: companyName,
      latestStatus: trail.first.status,
      updateTime: now,
      trackingTrail: trail,
    );
  }

  // 其他方法...
}

4. 页面实现

4.1 快递追踪主页

快递追踪主页是用户交互的主要入口，包含单号输入、快递公司选择、追踪按钮和历史记录等功能。

import 'package:flutter/material.dart';
import 'package:flutter_shili/pages/express_detail_page.dart';
import 'package:flutter_shili/models/express_model.dart';
import 'package:flutter_shili/services/express_service.dart';

/// 快递追踪主页
///
/// 提供快递单号输入、快递公司选择、追踪功能和历史记录查看
class ExpressTrackingPage extends StatefulWidget {
  const ExpressTrackingPage({super.key});

  @override
  State<ExpressTrackingPage> createState() => _ExpressTrackingPageState();
}

class _ExpressTrackingPageState extends State<ExpressTrackingPage> {
  /// 快递单号输入控制器
  final TextEditingController _trackingNumberController = TextEditingController();

  /// 选择的快递公司
  String _selectedCompany = 'auto';

  /// 追踪历史记录
  List<ExpressTracking> _trackingHistory = [];

  /// 是否正在加载
  bool _isLoading = false;

  /// 错误信息
  String? _errorMessage;

  @override
  void initState() {
    super.initState();
    _loadTrackingHistory();
  }

  // 其他方法...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('快递追踪'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 页面标题
            const Text(
              '快递单号追踪',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 24),

            // 快递单号输入
            _buildTrackingNumberInput(),
            const SizedBox(height: 16),

            // 快递公司选择
            _buildCompanySelector(),
            const SizedBox(height: 24),

            // 追踪按钮
            _buildTrackButton(),
            const SizedBox(height: 8),

            // 错误信息
            if (_errorMessage != null)
              Text(
                _errorMessage!,
                style: const TextStyle(color: Colors.red),
              ),
            const SizedBox(height: 32),

            // 历史记录
            _buildHistorySection(),
          ],
        ),
      ),
    );
  }

  // 构建方法...
}

4.2 快递详情页

快递详情页展示快递的详细信息和物流轨迹，支持下拉刷新和分享功能。

import 'package:flutter/material.dart';
import 'package:flutter_shili/models/express_model.dart';
import 'package:flutter_shili/services/express_service.dart';

/// 快递详情页
///
/// 展示快递的详细信息和物流轨迹
class ExpressDetailPage extends StatefulWidget {
  /// 追踪结果数据
  final ExpressTracking trackingResult;

  const ExpressDetailPage({super.key, required this.trackingResult});

  @override
  State<ExpressDetailPage> createState() => _ExpressDetailPageState();
}

class _ExpressDetailPageState extends State<ExpressDetailPage> {
  /// 是否正在刷新
  bool _isRefreshing = false;

  /// 更新后的追踪结果
  late ExpressTracking _trackingData;

  @override
  void initState() {
    super.initState();
    _trackingData = widget.trackingResult;
  }

  // 其他方法...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('快递详情'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        actions: [
          IconButton(
            onPressed: _shareTrackingInfo,
            icon: const Icon(Icons.share),
          ),
        ],
      ),
      body: RefreshIndicator(
        onRefresh: _refreshTracking,
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 快递基本信息
              _buildExpressInfoCard(),
              const SizedBox(height: 24),

              // 物流轨迹
              _buildTrackingTrail(),
            ],
          ),
        ),
      ),
    );
  }

  // 构建方法...
}

5. 路由配置

应用的路由配置在main.dart文件中实现，支持带参数的路由传递。

import 'package:flutter/material.dart';
import './pages/express_tracking_page.dart';
import './pages/express_detail_page.dart';
import './pages/financial_calculator_page.dart';
import './pages/nursery_rhyme_list_page.dart';
import './pages/nursery_rhyme_detail_page.dart';
import './pages/nursery_rhyme_favorites_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '快递追踪',
      theme: ThemeData(
        // 主色调
        primarySwatch: Colors.blue,
        // 文本主题
        textTheme: const TextTheme(
          headlineLarge: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          headlineMedium: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          bodyLarge: TextStyle(fontSize: 16),
          bodyMedium: TextStyle(fontSize: 14),
        ),
        // 卡片主题
        cardTheme: CardTheme(
          elevation: 4,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
        ),
        // 按钮主题
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          ),
        ),
      ),
      // 路由配置
      initialRoute: '/',
      routes: {
        '/': (context) => const ExpressTrackingPage(),
        '/financial_calculator': (context) => const FinancialCalculatorPage(),
        '/nursery_rhyme_list': (context) => const NurseryRhymeListPage(),
        '/nursery_rhyme_detail': (context) => const NurseryRhymeDetailPage(),
        '/nursery_rhyme_favorites': (context) => const NurseryRhymeFavoritesPage(),
      },
      // 处理带参数的路由
      onGenerateRoute: (settings) {
        if (settings.name == '/express_detail') {
          final args = settings.arguments as Map<String, dynamic>;
          return MaterialPageRoute(
            builder: (context) => ExpressDetailPage(
              trackingResult: args['trackingResult'],
            ),
          );
        }
        return null;
      },
      // 关闭debug banner
      debugShowCheckedModeBanner: false,
    );
  }
}

开发流程

1. 项目初始化

1. 使用Flutter CLI创建项目：

   flutter create express_tracking_app
   

2. 配置项目依赖：

   • 打开pubspec.yaml文件
   • 添加必要的依赖项

2. 架构设计

1. 设计项目目录结构
2. 定义数据模型
3. 设计页面布局和导航流程

3. 核心功能实现

1. 实现快递追踪服务
2. 开发快递追踪主页
3. 开发快递详情页
4. 实现历史记录功能
5. 实现分享功能

4. 测试与优化

1. 功能测试：测试各项功能是否正常工作
2. 性能优化：优化应用启动速度和响应时间
3. 兼容性测试：测试在不同设备上的运行情况
4. UI优化：优化界面美观度和用户体验

5. 打包与发布

1. 为不同平台生成应用包：

   • 鸿蒙平台：生成HAP包
   • Android平台：生成APK包
   • iOS平台：生成IPA包

2. 发布应用到应用商店

技术选型

技术/框架	版本	用途
Flutter	3.0+	跨平台UI框架
Dart	2.17+	开发语言
File I/O	内置	本地存储
Material Design	内置	UI设计

总结

本文详细介绍了基于Flutter框架开发快递追踪APP的完整流程。通过模块化设计和跨平台技术，我们成功实现了一款功能齐全、用户体验良好的快递追踪工具。

主要成果包括：

1. 跨平台兼容：基于Flutter框架，实现了在鸿蒙、Android、iOS等多个平台的运行
2. 功能完善：实现了快递单号查询、物流信息展示、历史记录等核心功能
3. 模块化架构：采用清晰的模块化设计，提高了代码的可维护性和可扩展性
4. 响应式布局：适配不同屏幕尺寸的设备，提供良好的用户体验
5. Mock数据支持：内置模拟数据，方便开发和测试

快递追踪APP的开发过程中，我们充分利用了Flutter的优势，实现了高效开发和优秀的用户体验。未来，我们将继续优化应用性能，增加更多功能，如批量查询、物流异常提醒等，为用户提供更加便捷的快递追踪服务。

通过本次开发实践，我们深刻体会到Flutter在跨平台开发中的强大优势，相信它将成为未来移动应用开发的重要工具。

附录

项目结构

lib/
├── models/
│   └── express_model.dart      # 快递相关模型
├── services/
│   └── express_service.dart    # 快递服务类
├── pages/
│   ├── express_tracking_page.dart  # 快递追踪主页
│   └── express_detail_page.dart    # 快递详情页
└── main.dart                   # 应用入口

关键API

1. ExpressService.trackPackage()：追踪快递
2. ExpressService.getCompanyList()：获取快递公司列表
3. ExpressService.getTrackingHistory()：获取追踪历史
4. ExpressService.saveToHistory()：保存到历史记录

开发环境

• Flutter SDK: 3.0+
• Dart SDK: 2.17+
• IDE: Visual Studio Code 或 Android Studio
• 鸿蒙开发工具: DevEco Studio

运行命令

# 运行应用
flutter run

# 构建鸿蒙应用
flutter build ohos

# 构建Android应用
flutter build apk

# 构建iOS应用
flutter build ios

📚 参考资料

• Flutter官方文档
• HarmonyOS官方文档
• Flutter for HarmonyOS开发指南
• Dart编程语言文档

通过本文的介绍，我们希望能够帮助开发者更好地理解Flutter框架在跨平台开发中的应用，以及快递追踪APP的开发流程。如果您对本文有任何疑问或建议，欢迎留言交流。

注：本文中的代码示例为简化版本，实际项目中可能需要根据具体需求进行调整。

---

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