Flutter for OpenHarmony艺考真题题库app实战+学习记录实现

2601_94997579

534人浏览 · 2026-01-18 22:38:49

2601_94997579 · 2026-01-18 22:38:49 发布

在这里插入图片描述

学习记录是艺考学习应用中的核心功能之一，它能让用户清晰回顾学习轨迹、掌握学习节奏。接下来我们将拆解学习记录页面的实现逻辑，从页面架构到交互细节，逐步打造功能完善且体验友好的学习记录模块。

学习记录页面核心架构设计

学习记录页面采用StatefulWidget开发，核心原因在于页面需要动态管理三类状态：

学习记录列表数据：随筛选条件变化实时更新
筛选条件：包含学习类型（全部/考试/练习/复习）等维度
排序规则：默认按时间倒序展示记录

核心代码框架精简如下，仅保留关键结构，确保逻辑清晰：

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

  @override
  State<StudyHistoryPage> createState() => _StudyHistoryPageState();
}

class _StudyHistoryPageState extends State<StudyHistoryPage> {
  String selectedFilter = '全部';
  final List<String> filters = ['全部', '考试', '练习', '复习'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('学习记录')),
      body: Column(children: [_buildFilterChips(), Expanded(child: _buildHistoryList())]),
    );
  }
}

筛选标签栏：轻量化交互设计

筛选标签栏是用户快速切换记录类型的核心控件，设计时重点考虑：

交互体验：点击标签即时切换筛选条件，无延迟感
视觉反馈：选中态/未选中态用不同配色区分，强化感知
适配性：水平滚动布局，适配多标签、小屏幕场景

核心实现代码：

Widget _buildFilterChips() {
  return Container(
    height: 50.h,
    padding: EdgeInsets.symmetric(horizontal: 16.w),
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: filters.length,
      itemBuilder: (context, index) {
        final filter = filters[index];
        return GestureDetector(
          onTap: () => setState(() => selectedFilter = filter),
          child: Container(
            margin: EdgeInsets.only(right: 8.w),
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            decoration: BoxDecoration(
              color: filter == selectedFilter ? Colors.brown : Colors.grey[200],
              borderRadius: BorderRadius.circular(20.r),
            ),
            child: Text(filter, style: TextStyle(color: filter == selectedFilter ? Colors.white : Colors.black)),
          ),
        );
      },
    ),
  );
}

统计摘要卡片：数据可视化轻量实现

统计卡片是学习记录的“数据看板”，设计目标是让用户一眼掌握核心学习数据，实现要点：

数据维度：聚焦今日/本周/总学习时长，贴合用户核心诉求
视觉设计：渐变背景提升质感，文字层级区分主次信息
布局规则：等分横向布局，保证视觉平衡

核心实现代码：

Widget _buildStatsSummary() {
  return Container(
    margin: EdgeInsets.all(16.w),
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      gradient: LinearGradient(colors: [Colors.brown[400]!, Colors.brown[600]!]),
      borderRadius: BorderRadius.circular(12.r),
    ),
    child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        _buildStatItem('今日学习', '2h 15m', Colors.white),
        _buildStatItem('本周学习', '18h 30m', Colors.white),
      ],
    ),
  );
}

单个统计项的封装代码：

Widget _buildStatItem(String label, String value, Color color) {
  return Column(
    children: [
      Text(value, style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold, color: color)),
      SizedBox(height: 4.h),
      Text(label, style: TextStyle(fontSize: 12.sp, color: color.withOpacity(0.8))),
    ],
  );
}

学习记录列表：高性能渲染设计

记录列表是页面核心内容区，性能与体验优化要点：

复用渲染：使用ListView.builder懒加载，仅渲染可视区域
卡片设计：单条记录包含类型图标、标题、时间等核心信息
交互扩展：点击卡片可查看详情，提升信息展示层级

核心实现代码：

Widget _buildHistoryList() {
  final historyItems = _getHistoryItems();
  return ListView.builder(
    padding: EdgeInsets.symmetric(horizontal: 16.w),
    itemCount: historyItems.length,
    itemBuilder: (context, index) {
      final item = historyItems[index];
      return Card(
        child: ListTile(
          leading: CircleAvatar(backgroundColor: _getTypeColor(item['type'])),
          title: Text(item['title']),
          subtitle: Text(item['time']),
          onTap: () => _showHistoryDetail(item),
        ),
      );
    },
  );
}

类型配色/图标：视觉辨识度优化

为不同学习类型配置专属配色和图标，强化视觉区分：

考试：红色+答题图标，突出正式感
练习：蓝色+编辑图标，体现日常训练
复习：绿色+刷新图标，传递巩固强化的含义

核心映射代码：

Color _getTypeColor(String type) {
  switch (type) {
    case '考试': return Colors.red;
    case '练习': return Colors.blue;
    case '复习': return Colors.green;
    default: return Colors.grey;
  }
}

IconData _getTypeIcon(String type) {
  switch (type) {
    case '考试': return Icons.quiz;
    case '练习': return Icons.edit;
    case '复习': return Icons.refresh;
    default: return Icons.school;
  }
}

筛选对话框：补充筛选交互方式

除了标签栏，新增弹窗式筛选，满足不同操作习惯：

弹窗布局：单选列表+取消按钮，操作逻辑清晰
即时生效：选择后自动关闭弹窗并更新列表

核心实现代码：

void _showFilterDialog() {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('筛选条件'),
      content: Column(mainAxisSize: MainAxisSize.min,
        children: filters.map((filter) => RadioListTile<String>(
          title: Text(filter),
          value: filter,
          groupValue: selectedFilter,
          onChanged: (v) => setState(() => selectedFilter = v!),
        )).toList(),
      ),
    ),
  );
}

记录详情弹窗：信息分层展示

点击记录卡片弹出详情弹窗，设计要点：

信息分层：核心信息优先展示，非必要信息按需呈现
操作扩展：考试/练习类记录新增“查看报告”按钮

核心实现代码：

void _showHistoryDetail(Map<String, dynamic> item) {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text(item['title']),
      content: Column(mainAxisSize: MainAxisSize.min,
        children: [
          Text('类型: ${item['type']}'),
          Text('时间: ${item['time']}'),
          if (item['score'] != null) Text('得分: ${item['score']}'),
        ],
      ),
      actions: [TextButton(onPressed: () => Navigator.pop(context), child: const Text('关闭'))],
    ),
  );
}

时间格式化：提升用户感知友好度

将原始时间戳转换为“今天/昨天/X天前”等友好格式，降低理解成本：

String _formatDateTime(DateTime date) {
  final difference = DateTime.now().difference(date);
  if (difference.inDays == 0) return '今天';
  if (difference.inDays == 1) return '昨天';
  return difference.inDays < 7 ? '${difference.inDays}天前' : '${date.month}/${date.day}';
}