从零搭建 Flutter 项目结构，配置路由与页面框架
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

一、本日目标

1. 创建 Flutter 项目 my_class_schedule
2. 搭建清晰的文件夹结构
3. 配置路由和底部导航栏
4. 完成三个主要页面的框架搭建

二、项目创建

2.1 创建项目

cd C:\Users\Kreide
flutter create my_class_schedule
cd my_class_schedule

2.2 验证环境

flutter devices

确认鸿蒙模拟器已连接并显示。如果没显示设备，需前往DevEco Studio打开模拟器。

三、文件夹结构

在 lib/ 目录下创建以下文件夹：

lib/
├── main.dart              # 应用入口
├── config/                # 配置文件
│   └── routes.dart        # 路由配置
├── constants/             # 常量
│   ├── colors.dart        # 颜色常量
│   └── strings.dart       # 字符串常量
├── pages/                 # 页面
│   ├── home_page.dart     # 课表页
│   ├── homework_page.dart # 作业页
│   └── profile_page.dart  # 个人页
├── widgets/               # 可复用组件（待添加）
├── models/                # 数据模型（待添加）
├── services/              # 服务层（待添加）
└── utils/                 # 工具类（待添加）

四、核心代码实现

4.1 颜色常量 (lib/constants/colors.dart)

import 'package:flutter/material.dart';

class AppColors {
  static const Color primary = Color(0xFF4A6FA5);
  static const Color secondary = Color(0xFF67B7DC);
  static const Color background = Color(0xFFF5F7FA);
  static const Color cardBackground = Colors.white;
  static const Color textPrimary = Color(0xFF333333);
  static const Color textSecondary = Color(0xFF666666);
  static const Color textHint = Color(0xFF999999);
  static const Color success = Color(0xFF4CAF50);
  static const Color warning = Color(0xFFFF9800);
  static const Color error = Color(0xFFE53935);
}

4.2 路由配置 (lib/config/routes.dart)

import 'package:flutter/material.dart';
import '../pages/home_page.dart';
import '../pages/homework_page.dart';
import '../pages/profile_page.dart';

class AppRoutes {
  static const String home = '/';
  static const String homework = '/homework';
  static const String profile = '/profile';
  
  static Map<String, WidgetBuilder> get routes {
    return {
      home: (context) => const HomePage(),
      homework: (context) => const HomeworkPage(),
      profile: (context) => const ProfilePage(),
    };
  }
}

4.3 主入口 (lib/main.dart)

import 'package:flutter/material.dart';
import 'constants/colors.dart';
import 'config/routes.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '课程助手',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: AppColors.primary,
        scaffoldBackgroundColor: AppColors.background,
        appBarTheme: const AppBarTheme(
          backgroundColor: AppColors.primary,
          foregroundColor: Colors.white,
          centerTitle: true,
          elevation: 0,
        ),
      ),
      initialRoute: AppRoutes.home,
      routes: AppRoutes.routes,
    );
  }
}

4.4 三个页面框架

课表页 (lib/pages/home_page.dart)

import 'package:flutter/material.dart';
import '../constants/colors.dart';
import 'homework_page.dart';
import 'profile_page.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  
  final List<Widget> _pages = [
    const CoursePage(),
    const HomeworkPage(),
    const ProfilePage(),
  ];
  
  final List<String> _titles = ['课表', '作业', '我的'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_titles[_currentIndex]),
        backgroundColor: AppColors.primary,
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        selectedItemColor: AppColors.primary,
        unselectedItemColor: AppColors.textHint,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), label: '课表'),
          BottomNavigationBarItem(icon: Icon(Icons.assignment), label: '作业'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

class CoursePage extends StatelessWidget {
  const CoursePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('课表视图 - 待开发'),
    );
  }
}

作业页 (lib/pages/homework_page.dart)

import 'package:flutter/material.dart';
import '../constants/colors.dart';

class HomeworkPage extends StatelessWidget {
  const HomeworkPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('作业'),
        backgroundColor: AppColors.primary,
      ),
      body: const Center(
        child: Text('作业页面 - 待开发'),
      ),
    );
  }
}

个人页 (lib/pages/profile_page.dart)

import 'package:flutter/material.dart';
import '../constants/colors.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的'),
        backgroundColor: AppColors.primary,
      ),
      body: const Center(
        child: Text('个人页面 - 待开发'),
      ),
    );
  }
}

五、运行验证

5.1 运行命令

flutter run

Tips：记得检查是否是在项目中执行，地址应是C:\Users\用户名\my_class_schedule>，如果不是记得cd到项目根目录。

5.2 预期结果

验证项	预期结果
应用启动	无报错，正常打开
底部导航栏	显示三个 Tab（课表、作业、我的）
Tab 切换	点击后页面切换，AppBar 标题同步变化
页面内容	每个页面显示相应的占位文字

六、本日成果

成果	说明
✅ 项目创建	my_class_schedule 已创建
✅ 文件夹结构	清晰的分层架构
✅ 路由配置	三个页面的路由已配置
✅ 底部导航	课表/作业/个人 三个 Tab 可切换
✅ 运行验证	在鸿蒙模拟器上成功运行

七、遇到的问题与解决

问题	原因	解决方案
resolving dependencies 卡住	网络问题	用flutter clean清楚缓存后重新启动
符号链接权限报错	Windows 未开启开发人员模式	开启“开发人员模式”并重启
路由重复错误	home 和 routes['/'] 同时存在	删除 home

八、下一步计划（暂定）

任务	说明
实现课表网格视图	展示周一到周日的课程
添加课程功能	弹窗表单添加课程
数据持久化	使用 shared_preferences 保存数据
作业管理	作业列表的增删改查

---

本日完成：项目框架搭建完成，三个页面可正常切换。下一步将实现具体的课表网格视图。