Flutter框架跨平台鸿蒙开发——学校校历APP的开发流程

🚀运行效果展示

Flutter框架跨平台鸿蒙开发------学校校历APP的开发流程

前言

随着移动互联网的普及，学校校历作为学生和教师日常学习生活的重要参考工具，也需要适应数字化时代的发展。本项目基于Flutter框架开发了一款跨平台的学校校历APP，支持在鸿蒙系统等多个平台上运行，为用户提供便捷的校历查询、日程管理和课程表查看功能。

应用介绍

功能概述

学校校历APP是一款专为学生和教师设计的移动应用，主要提供以下功能：

• 校历查看：支持月视图和周视图切换，清晰展示学期内的重要日期和事件
• 事件管理：显示节假日、考试、活动等重要校历事件
• 日程管理：支持添加、编辑和删除个人日程，设置提醒
• 课程表：展示每周课程安排，支持查看课程详情
• 响应式设计：适配不同屏幕尺寸，提供良好的用户体验

技术栈

• Flutter：跨平台UI框架，支持Android、iOS、鸿蒙等多个平台
• Dart：Flutter的开发语言
• table_calendar：日历组件库，用于实现校历视图
• provider：状态管理库，用于管理应用状态

核心功能实现

1. 数据模型设计

校历事件模型

import 'package:flutter/material.dart';

/// 校历事件模型
class CalendarEvent {
  /// 事件ID
  final String id;
  /// 事件标题
  final String title;
  /// 事件描述
  final String? description;
  /// 事件开始时间
  final DateTime startDateTime;
  /// 事件结束时间
  final DateTime endDateTime;
  /// 事件类型（节假日、考试、活动等）
  final EventType type;
  /// 是否为全天事件
  final bool isAllDay;
  /// 事件颜色
  final Color color;

  /// 构造函数
  CalendarEvent({
    required this.id,
    required this.title,
    this.description,
    required this.startDateTime,
    required this.endDateTime,
    required this.type,
    this.isAllDay = false,
    this.color = Colors.blue,
  });
}

/// 事件类型枚举
enum EventType {
  /// 节假日
  holiday,
  /// 考试
  exam,
  /// 活动
  activity,
  /// 其他
  other,
}

课程和日程模型

/// 课程模型
class Course {
  /// 课程ID
  final String id;
  /// 课程名称
  final String name;
  /// 教师姓名
  final String teacher;
  /// 上课地点
  final String location;
  /// 上课时间
  final List<CourseTime> times;
  /// 课程颜色
  final Color color;

  /// 构造函数
  Course({
    required this.id,
    required this.name,
    required this.teacher,
    required this.location,
    required this.times,
    this.color = Colors.green,
  });
}

/// 日程模型
class Schedule {
  /// 日程ID
  final String id;
  /// 日程标题
  final String title;
  /// 日程描述
  final String? description;
  /// 日程时间
  final DateTime dateTime;
  /// 是否完成
  final bool isCompleted;
  /// 是否有提醒
  final bool hasReminder;
  /// 提醒时间（提前几分钟）
  final int? reminderMinutes;

  /// 构造函数
  Schedule({
    required this.id,
    required this.title,
    this.description,
    required this.dateTime,
    this.isCompleted = false,
    this.hasReminder = false,
    this.reminderMinutes,
  });
}

2. 校历服务层

校历服务层负责提供数据支持，包括获取学期信息、课程表和日程数据：

/// 校历服务类，提供校历相关的数据服务
class SchoolCalendarService {
  /// 获取当前学期信息
  SchoolTerm getCurrentTerm() {
    return SchoolTerm(
      id: '2024-2025-1',
      name: '2024-2025学年第一学期',
      startDate: DateTime(2024, 9, 2),
      endDate: DateTime(2025, 1, 18),
      weeks: 20,
      events: _getMockEvents(),
    );
  }

  /// 获取模拟课程数据
  List<Course> getMockCourses() {
    return [
      Course(
        id: '1',
        name: '高等数学',
        teacher: '张老师',
        location: '教学楼101',
        times: [
          CourseTime(
            dayOfWeek: 1,
            startSection: 1,
            endSection: 2,
            startTime: const TimeOfDay(hour: 8, minute: 0),
            endTime: const TimeOfDay(hour: 9, minute: 40),
          ),
        ],
        color: Colors.blue,
      ),
      // 更多课程...
    ];
  }

  /// 获取模拟日程数据
  List<Schedule> getMockSchedules() {
    return [
      Schedule(
        id: '1',
        title: '小组讨论',
        description: '讨论Flutter项目进度',
        dateTime: DateTime.now().add(const Duration(days: 1, hours: 14)),
        hasReminder: true,
        reminderMinutes: 30,
      ),
      // 更多日程...
    ];
  }

  /// 获取模拟校历事件
  List<CalendarEvent> _getMockEvents() {
    return [
      CalendarEvent(
        id: '1',
        title: '国庆节',
        description: '国庆节放假7天',
        startDateTime: DateTime(2024, 10, 1),
        endDateTime: DateTime(2024, 10, 7),
        type: EventType.holiday,
        isAllDay: true,
        color: Colors.red,
      ),
      // 更多事件...
    ];
  }
}

3. 校历主页面实现

校历主页面是应用的核心界面，实现了日历视图、事件和日程的展示：

class SchoolCalendarMainPage extends StatefulWidget {
  const SchoolCalendarMainPage({Key? key}) : super(key: key);

  @override
  State<SchoolCalendarMainPage> createState() => _SchoolCalendarMainPageState();
}

class _SchoolCalendarMainPageState extends State<SchoolCalendarMainPage> {
  /// 校历服务
  final SchoolCalendarService _calendarService = SchoolCalendarService();
  /// 日历控制器
  late CalendarFormat _calendarFormat;
  /// 当前选中的日期
  late DateTime _focusedDay;
  /// 选中的日期
  late DateTime? _selectedDay;
  /// 校历事件列表
  List<CalendarEvent> _events = [];
  /// 日程列表
  List<Schedule> _schedules = [];

  @override
  void initState() {
    super.initState();
    _calendarFormat = CalendarFormat.month;
    _focusedDay = DateTime.now();
    _selectedDay = _focusedDay;
    _loadData();
  }

  /// 加载数据
  void _loadData() {
    final currentTerm = _calendarService.getCurrentTerm();
    setState(() {
      _events = currentTerm.events;
      _schedules = _calendarService.getMockSchedules();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('学校校历'),
        actions: [
          // 视图切换菜单
          PopupMenuButton<CalendarFormat>(
            onSelected: (format) {
              setState(() {
                _calendarFormat = format;
              });
            },
            itemBuilder: (context) => [
              const PopupMenuItem(
                value: CalendarFormat.week,
                child: Text('周视图'),
              ),
              const PopupMenuItem(
                value: CalendarFormat.month,
                child: Text('月视图'),
              ),
            ],
          ),
        ],
      ),
      body: Column(
        children: [
          // 日历组件
          TableCalendar<CalendarEvent>(
            firstDay: DateTime.utc(2024, 1, 1),
            lastDay: DateTime.utc(2025, 12, 31),
            focusedDay: _focusedDay,
            calendarFormat: _calendarFormat,
            selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
            onDaySelected: _onDaySelected,
            onFormatChanged: (format) {
              if (_calendarFormat != format) {
                setState(() {
                  _calendarFormat = format;
                });
              }
            },
            onPageChanged: (focusedDay) {
              _focusedDay = focusedDay;
            },
            eventLoader: _getEventsForDay,
            holidayPredicate: (day) {
              // 检查是否为节假日
              return _events.any((event) =>
                  event.type == EventType.holiday &&
                  event.startDateTime.isBefore(day.add(const Duration(days: 1))) &&
                  event.endDateTime.isAfter(day.subtract(const Duration(days: 1))));
            },
            calendarStyle: const CalendarStyle(
              todayDecoration: BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
              selectedDecoration: BoxDecoration(
                color: Colors.deepOrange,
                shape: BoxShape.circle,
              ),
              holidayTextStyle: TextStyle(color: Colors.red),
            ),
          ),
          // 事件和日程列表
          Expanded(
            child: ListView(
              children: [
                // 事件列表
                if (selectedEvents.isNotEmpty) ...[
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      '校历事件',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  ...selectedEvents.map((event) => _buildEventCard(event)),
                ],
                // 日程列表
                if (selectedSchedules.isNotEmpty) ...[
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text(
                      '今日日程',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  ...selectedSchedules.map((schedule) => _buildScheduleCard(schedule)),
                ],
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 添加新日程
          _showAddScheduleDialog();
        },
        child: const Icon(Icons.add),
        tooltip: '添加日程',
      ),
    );
  }

  // 其他方法...
}

4. 路由配置

在main.dart中配置应用路由：

import 'package:flutter/material.dart';
import './pages/school_calendar_main_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 SchoolCalendarMainPage(),
      },
      debugShowCheckedModeBanner: false,
    );
  }
}

应用架构设计

架构流程图

数据模型
服务层
状态管理
用户界面
用户界面
状态管理
服务层
数据模型
校历主页面
课程表页面
日程管理页面
设置页面
校历状态
课程表状态
日程状态
校历服务
课程服务
日程服务
校历事件模型
课程模型
日程模型
学期模型

开发流程总结

1. 需求分析与设计

• 确定应用核心功能：校历查看、事件管理、日程管理、课程表
• 设计数据模型：校历事件、课程、日程、学期
• 设计UI界面：日历视图、事件列表、日程列表、课程表

2. 项目初始化

• 创建Flutter项目
• 配置依赖：table_calendar、provider等
• 设置项目主题和样式

3. 核心功能实现

• 实现数据模型
• 实现服务层，提供数据支持
• 实现校历主页面，包括日历视图和事件列表
• 实现日程管理功能
• 实现课程表功能

4. 测试与优化

• 测试应用在不同平台上的运行情况
• 优化UI设计，提高用户体验
• 修复bug，提高应用稳定性

5. 跨平台适配

• 适配不同屏幕尺寸
• 测试鸿蒙系统等平台的兼容性
• 优化性能，提高运行流畅度

总结

本项目基于Flutter框架开发了一款跨平台的学校校历APP，实现了校历查看、事件管理、日程管理和课程表等核心功能。应用采用了清晰的架构设计，包括数据模型层、服务层、状态管理层和用户界面层，便于维护和扩展。

通过Flutter的跨平台特性，应用可以在鸿蒙系统等多个平台上运行，为用户提供一致的使用体验。同时，应用采用了响应式设计，适配不同屏幕尺寸，提高了用户体验。

未来可以进一步扩展应用功能，如添加云同步功能、推送提醒、课程表导入导出等，提高应用的实用性和便捷性。

运行效果

应用运行后，用户可以看到一个直观的日历界面，支持月视图和周视图切换。在日历上可以查看各种校历事件，如节假日、考试等。选中某一天后，可以查看当天的事件和日程。用户还可以添加、编辑和删除个人日程，设置提醒。

应用界面简洁美观，操作流畅，为用户提供了便捷的校历查询和日程管理功能。

附录

项目结构

lib/
├── models/
│   └── school_calendar_model.dart  # 数据模型
├── pages/
│   └── school_calendar_main_page.dart  # 校历主页面
├── services/
│   └── school_calendar_service.dart  # 校历服务
└── main.dart  # 应用入口

主要依赖

• flutter: 2.10.5
• table_calendar: ^3.1.1
• provider: ^6.1.1

运行命令

# 获取依赖
flutter pub get

# 运行应用
flutter run

# 构建APK
flutter build apk

# 构建鸿蒙HAP包
flutter build ohos

---

通过本项目的开发，我们学习了如何使用Flutter框架开发跨平台应用，如何设计数据模型和服务层，如何实现日历视图和事件管理功能。希望本项目能够为其他开发者提供参考，共同推动跨平台应用开发的发展。

📚 参考资料

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

---

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