随着移动学习需求增长,用户希望在手机上随时随地浏览课程、查看详情并管理学习进度。传统教育类App存在页面加载慢、课程分类混乱、详情页信息不完整等问题。本项目旨在构建一个轻量级课程学习App,解决课程浏览体验差、分类不清晰、详情页缺少课时与标签信息等痛点,为后续接入真实课程数据和支付功能提供可扩展的前端基础。
点击空白处退出提示
随着移动学习需求增长,用户希望在手机上随时随地浏览课程、查看详情并管理学习进度。传统教育类App存在页面加载慢、课程分类混乱、详情页信息不完整等问题。本项目旨在构建一个轻量级课程学习App,解决课程浏览体验差、分类不清晰、详情页缺少课时与标签信息等痛点,为后续接入真实课程数据和支付功能提供可扩展的前端基础。
项目包含四个核心模块:首页、课程列表、课程详情、个人中心。首页顶部为搜索栏,下方支持推荐/免费课/实战课/0基础代码四个Tab切换;推荐页含自动轮播图(3秒切换、带圆点指示器)和双列课程网格,每张卡片展示封面、标题、划线价、浏览量。课程列表页用ListView渲染课程项,含课时数、标签和图片加载失败兜底。课程详情页接收列表页传参,展示封面、课时、标签、简介和购买按钮。个人中心包含带图标和不带图标两种分组列表、Switch开关、NEW标签等。
我独立负责全部开发工作,包括页面搭建、状态管理、路由跳转和UI还原。技术栈为Flutter + Dart,使用Material Design组件库。架构上采用命名路由管理页面跳转,StatefulWidget + setState管理页面状态。实现亮点:轮播图用Timer.periodic实现自动播放,并在dispose中正确取消定时器和销毁PageController,避免内存泄漏;图片加载使用errorBuilder做容错兜底;课程网格用GridView.builder懒加载,详情页通过构造函数接收列表页传参。难点在于轮播索引与PageController的同步、多Tab切换时状态保持,以及不同屏幕尺寸下网格卡片的适配。





评论