课程中心是智慧学习助手的核心模块，为学生提供丰富的在线课程资源。本文将详细介绍如何使用Flutter for OpenHarmony实现一个功能完整、界面美观的课程中心页面。

课程中心的重要性

在线学习已成为现代教育的重要组成部分。课程中心作为课程资源的集散地，需要提供清晰的导航、丰富的内容展示和便捷的访问方式。一个设计良好的课程中心能够大大提升学习体验。

页面结构定义

首先定义课程中心页面的基本结构：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'my_courses_page.dart';
import 'course_categories_page.dart';
import 'course_search_page.dart';
import 'course_detail_page.dart';

引入必要的依赖包，包括屏幕适配、路由导航和相关页面。使用Get包实现页面跳转，简化路由管理。这些导入为后续功能实现奠定基础。

页面类定义

创建课程中心的StatelessWidget：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('课程中心'),
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () => Get.to(() => const CourseSearchPage()),
          ),
        ],
      ),

使用StatelessWidget因为课程中心主要展示静态内容。AppBar右侧添加搜索图标，点击跳转到课程搜索页面。这是课程中心的标准配置。

页面布局设计

实现可滚动的页面布局：

      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildQuickAccess(),
            SizedBox(height: 20.h),
            _buildMyCourses(),
            SizedBox(height: 20.h),
            _buildRecommendedCourses(),
            SizedBox(height: 20.h),
            _buildPopularCourses(),
          ],
        ),
      ),
    );
  }

使用SingleChildScrollView使页面可以滚动，Column垂直排列各个模块。包括快速访问、我的课程、推荐课程和热门课程四个部分。每个模块之间用SizedBox添加间距，保持视觉舒适。

快速访问模块

实现快速访问功能区：

  Widget _buildQuickAccess() {
    return Container(
      margin: EdgeInsets.all(16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '快速访问',
            style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 12.h),
          Row(
            children: [
              Expanded(
                child: _buildAccessCard(
                  '我的课程',
                  Icons.school,
                  Colors.blue,
                  () => Get.to(() => const MyCoursesPage()),
                ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child: _buildAccessCard(
                  '课程分类',
                  Icons.category,
                  Colors.orange,
                  () => Get.to(() => const CourseCategoriesPage()),
                ),
              ),
            ],
          ),

快速访问区域提供常用功能的快捷入口。使用Row水平排列两个卡片，Expanded确保它们平分空间。第一行是我的课程和课程分类，使用不同颜色区分。

快速访问第二行

继续添加快速访问卡片：

          SizedBox(height: 12.h),
          Row(
            children: [
              Expanded(
                child: _buildAccessCard(
                  '我的笔记',
                  Icons.note,
                  Colors.green,
                  () => Get.to(() => const CourseNotesPage()),
                ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child: _buildAccessCard(
                  '我的证书',
                  Icons.card_membership,
                  Colors.purple,
                  () => Get.to(() => const CertificatesPage()),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

第二行是我的笔记和我的证书，同样使用不同颜色。四个快速访问入口覆盖了课程学习的主要场景，方便用户快速进入相关功能。

访问卡片组件

实现可复用的访问卡片：

  Widget _buildAccessCard(String title, IconData icon, Color color, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: color.withOpacity(0.1),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Row(
          children: [
            Icon(icon, color: color, size: 30.sp),
            SizedBox(width: 12.w),
            Expanded(
              child: Text(
                title,
                style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
    );
  }

_buildAccessCard方法创建统一风格的访问卡片。使用GestureDetector监听点击事件。Container使用半透明背景色和圆角。左侧显示图标，右侧显示标题，Expanded确保标题占据剩余空间。

我的课程模块

实现继续学习区域：

  Widget _buildMyCourses() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '继续学习',
                style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
              ),
              TextButton(
                onPressed: () => Get.to(() => const MyCoursesPage()),
                child: const Text('查看全部'),
              ),
            ],
          ),

继续学习区域显示用户正在学习的课程。标题和"查看全部"按钮在同一行，使用Row和MainAxisAlignment.spaceBetween实现两端对齐。点击"查看全部"跳转到我的课程页面。

课程卡片展示

显示正在学习的课程：

          SizedBox(height: 12.h),
          _buildCourseCard(
            '高等数学',
            '微积分基础',
            0.65,
            'assets/images/icon.png',
            () => Get.to(() => const CourseDetailPage(courseId: '1')),
          ),
        ],
      ),
    );
  }

调用_buildCourseCard方法创建课程卡片，传入课程名称、副标题、学习进度、图片和点击回调。进度0.65表示已完成65%。点击卡片跳转到课程详情页面。

推荐课程模块

实现推荐课程区域：

  Widget _buildRecommendedCourses() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '推荐课程',
            style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 12.h),
          SizedBox(
            height: 200.h,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                _buildRecommendCard('Python编程', '零基础入门', '12课时'),
                _buildRecommendCard('数据结构', '算法与实现', '20课时'),
                _buildRecommendCard('英语四级', '词汇突破', '30课时'),
              ],
            ),
          ),
        ],
      ),
    );
  }

推荐课程使用水平滚动的ListView展示。设置固定高度200逻辑像素，scrollDirection设置为horizontal实现横向滚动。包含三门推荐课程，涵盖不同学科。

推荐卡片组件

实现推荐课程卡片：

  Widget _buildRecommendCard(String title, String subtitle, String duration) {
    return Container(
      width: 160.w,
      margin: EdgeInsets.only(right: 12.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 100.h,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.1),
              borderRadius: BorderRadius.vertical(top: Radius.circular(12.r)),
            ),
            child: Center(
              child: Icon(Icons.play_circle_outline, size: 50.sp, color: Colors.blue),
            ),
          ),

推荐卡片宽度固定为160逻辑像素，右侧添加间距。顶部是课程封面区域，使用蓝色半透明背景和播放图标。BorderRadius.vertical只设置顶部圆角。

推荐卡片信息

显示推荐课程的详细信息：

          Padding(
            padding: EdgeInsets.all(12.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 4.h),
                Text(
                  subtitle,
                  style: TextStyle(fontSize: 12.sp, color: Colors.grey),
                ),
                SizedBox(height: 8.h),
                Row(
                  children: [
                    Icon(Icons.access_time, size: 12.sp, color: Colors.grey),
                    SizedBox(width: 4.w),
                    Text(
                      duration,
                      style: TextStyle(fontSize: 10.sp, color: Colors.grey),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

卡片下方显示课程标题、副标题和课时信息。标题使用粗体突出，副标题和课时使用灰色。课时前面添加时钟图标，视觉效果更好。

热门课程模块

实现热门课程区域：

  Widget _buildPopularCourses() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '热门课程',
            style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 12.h),
          _buildCourseCard('机器学习', 'AI入门必修课', 0.0, 'assets/images/icon.png', () {}),
          SizedBox(height: 12.h),
          _buildCourseCard('Web开发', '全栈工程师之路', 0.0, 'assets/images/icon.png', () {}),
        ],
      ),
    );
  }

热门课程垂直排列，显示两门热门课程。进度为0表示还未开始学习。每个课程卡片之间添加间距。这些课程代表了当前最受欢迎的学习内容。

课程卡片组件

实现通用的课程卡片：

  Widget _buildCourseCard(String title, String subtitle, double progress, String image, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.all(12.w),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Row(
          children: [
            Container(
              width: 80.w,
              height: 80.w,
              decoration: BoxDecoration(
                color: Colors.blue.withOpacity(0.1),
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: Icon(Icons.book, size: 40.sp, color: Colors.blue),
            ),
            SizedBox(width: 12.w),

_buildCourseCard创建可复用的课程卡片。左侧显示课程封面，使用正方形容器和书本图标。实际应用中应该显示真实的课程图片。

课程信息显示

显示课程的详细信息和进度：

            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    subtitle,
                    style: TextStyle(fontSize: 12.sp, color: Colors.grey),
                  ),
                  if (progress > 0) ...[
                    SizedBox(height: 8.h),
                    LinearProgressIndicator(
                      value: progress,
                      backgroundColor: Colors.grey[200],
                      valueColor: const AlwaysStoppedAnimation<Color>(Colors.blue),
                    ),
                    SizedBox(height: 4.h),
                    Text(
                      '已完成 ${(progress * 100).toInt()}%',
                      style: TextStyle(fontSize: 10.sp, color: Colors.grey),
                    ),
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

右侧显示课程标题和副标题。如果进度大于0，显示进度条和百分比文字。使用条件渲染，未开始的课程不显示进度信息。Expanded确保信息区域占据剩余空间。

功能特点分析

这个课程中心实现有几个设计亮点。首先是信息架构清晰，快速访问、继续学习、推荐课程、热门课程，层次分明。其次是交互设计合理，重要功能都有快捷入口。

再者是视觉设计统一，使用一致的卡片样式和颜色方案。最后是扩展性好，各个模块独立，易于添加新功能。这些设计让课程中心既美观又实用。

使用场景

课程中心适用于多种学习场景。学生可以浏览推荐课程，发现感兴趣的内容。可以继续学习未完成的课程，保持学习连续性。

可以通过快速访问进入常用功能，提高效率。可以查看热门课程，了解学习趋势。通过分类浏览，找到特定学科的课程。

数据加载优化

当前实现使用硬编码数据，实际应用中应该从服务器加载。可以使用FutureBuilder实现异步数据加载。在加载过程中显示骨架屏或加载指示器。

可以实现分页加载，避免一次加载过多数据。可以使用缓存机制，减少网络请求。可以实现下拉刷新和上拉加载更多。

个性化推荐

可以实现个性化推荐算法。根据用户的学习历史推荐相关课程。根据用户的兴趣标签推荐匹配课程。

可以分析用户的学习行为，预测可能感兴趣的内容。可以参考协同过滤算法，推荐其他相似用户喜欢的课程。这些个性化功能能够提升用户体验。

课程筛选功能

可以添加课程筛选功能。可以按难度筛选，初级、中级、高级。可以按时长筛选，短期、中期、长期。

可以按价格筛选，免费、付费。可以按评分筛选，高分优先。可以按更新时间筛选，最新课程。这些筛选功能能够帮助用户快速找到合适的课程。

课程收藏功能

可以添加课程收藏功能。用户可以收藏感兴趣的课程，方便后续学习。可以在课程卡片上添加收藏按钮。

可以在个人中心查看收藏的课程。可以取消收藏不再感兴趣的课程。可以分享收藏的课程给好友。

学习进度同步

可以实现学习进度同步功能。用户在不同设备上学习，进度自动同步。可以使用云端存储保存进度数据。

可以显示同步状态，让用户了解数据是否最新。可以处理同步冲突，比如在不同设备上学习同一课程。这些同步功能能够提供无缝的跨设备体验。

课程评价系统

可以添加课程评价功能。用户可以对学习过的课程进行评分和评论。可以查看其他用户的评价，了解课程质量。

可以根据评价筛选课程，优先显示高分课程。可以举报不当评论，维护社区环境。评价系统能够帮助用户做出更好的选择。

学习社区功能

可以建立学习社区。用户可以在课程下发表讨论，交流学习心得。可以提问和回答问题，互相帮助。

可以关注其他学习者，查看他们的学习动态。可以加入学习小组，一起学习课程。社区功能能够让学习不再孤单。

离线学习支持

可以实现离线学习功能。用户可以下载课程视频和资料，在没有网络时学习。可以管理下载内容，删除不需要的文件。

可以设置下载质量，节省存储空间。可以在WiFi环境下自动下载，节省流量。离线功能能够让学习不受网络限制。

学习提醒功能

可以添加学习提醒功能。用户可以设置学习计划，系统定时提醒。可以提醒未完成的课程，督促学习。

可以提醒课程更新，及时学习新内容。可以自定义提醒时间和频率。提醒功能能够帮助用户养成学习习惯。

性能优化

课程中心需要加载大量数据和图片，性能优化很重要。可以使用图片缓存，避免重复加载。可以使用懒加载，只加载可见区域的内容。

可以使用const构造函数，减少Widget重建。可以避免不必要的setState调用。这些优化能够保证流畅的用户体验。

用户体验优化

为了提升用户体验，可以添加一些细节。比如添加骨架屏，在数据加载时显示页面结构。可以添加空状态提示，在没有课程时引导用户。

可以添加错误处理，网络异常时显示友好提示。可以添加重试功能，方便用户重新加载。这些细节能够让应用更加精致。

无障碍支持

为了让所有用户都能使用课程中心，需要添加无障碍支持。为课程卡片添加语义标签，让屏幕阅读器能够正确朗读。确保颜色对比度足够高。

支持键盘导航，不依赖触摸操作。支持大字体模式，适应视力较弱的用户。这些改进体现了对所有用户的关怀。

测试要点

测试课程中心需要关注几个方面。测试各个模块的显示是否正常。测试页面跳转是否正确。测试滚动性能是否流畅。

测试数据加载是否正常，异常情况的处理。测试在不同屏幕尺寸下的显示效果。测试大量课程时的性能表现。

代码质量

这个实现遵循了良好的编码规范。使用组件化设计，将不同模块拆分为独立方法。代码结构清晰，易于理解和维护。

使用了合适的Widget组件，发挥了Flutter的优势。正确使用了路由导航，页面跳转流畅。代码风格统一，命名规范。

总结

课程中心是智慧学习助手的核心模块，为学生提供丰富的课程资源。本文详细介绍了如何使用Flutter for OpenHarmony实现这个功能，包括快速访问、继续学习、推荐课程、热门课程等模块。

通过精心的设计和实现，我们创建了一个功能完整、界面美观的课程中心。这个模块不仅能够展示课程，还能引导学生发现和学习优质内容。希望本文能够为开发者提供有价值的参考，共同打造更优秀的学习应用。

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