统计概览是艺考学习应用中的重要功能，它能够帮助用户全面了解自己的学习状况。今天我们将详细介绍如何构建一个功能完善的统计概览页面，包含学习数据可视化、趋势分析、成绩统计等功能。

统计概览架构

统计概览页面采用分层的垂直布局思路，核心设计要点如下：

• 页面结构分三段式：顶部概览卡片、中间趋势图表、底部科目与考试数据，符合用户从上到下的阅读习惯
• 采用SingleChildScrollView包裹内容，适配小屏设备避免内容溢出
• 各模块间保留统一的间距（24.h），保证视觉呼吸感

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

  @override
  State<StatisticsOverviewPage> createState() => 
      _StatisticsOverviewPageState();
}

页面构建的核心逻辑设计说明：

• Scaffold作为基础容器，统一配置导航栏样式
• AppBar使用深紫色主题，与艺考应用的艺术调性匹配
• 所有模块通过Column纵向排列，提升信息层级感

class _StatisticsOverviewPageState extends State<StatisticsOverviewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('统计概览'),
        backgroundColor: Colors.deepPurple,
      ),
    );
  }
}

概览卡片设计

概览卡片作为核心数据展示区，设计亮点如下：

• 采用渐变背景增强视觉层次感，从深紫400到600的渐变过渡更自然
• 卡片圆角设置为16.r，符合移动端设计的圆润风格
• 关键数据分两行三列布局，避免单行列数过多导致的视觉拥挤

Widget _buildOverviewCard() {
  return Container(
    padding: EdgeInsets.all(20.w),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.deepPurple[400]!, Colors.deepPurple[600]!],
      ),
      borderRadius: BorderRadius.circular(16.r),
    ),
  );
}

数据项的展示规范设计：

• 数值采用24.sp粗体，标签用12.sp半透明字体，突出核心数据
• 数值与标签间保留4.h间距，提升可读性
• 统一的白色系配色，与渐变背景形成鲜明对比

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

本周学习趋势图表

折线图模块的设计考量：

• 外层容器添加轻微阴影（blurRadius:10），提升卡片的悬浮感
• 网格线仅保留水平方向，避免垂直网格线干扰折线视觉
• 折线设置为曲线（isCurved: true），使趋势展示更流畅

Widget _buildWeeklyChart() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.1))],
    ),
  );
}

图表坐标轴的个性化配置：

• 左侧Y轴显示数值，间隔为20，适配学习时长/题量的数值范围
• 底部X轴显示星期，用中文简写更符合国内用户习惯
• 隐藏右侧和顶部坐标轴，简化图表视觉元素

LineChartData(
  gridData: FlGridData(
    show: true,
    drawVerticalLine: false,
    horizontalInterval: 20,
  ),
  titlesData: FlTitlesData(
    rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
    topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
  ),
)

折线数据的视觉强化设计：

• 折线宽度设为3.w，保证在不同屏幕下的可视性
• 数据点添加白色描边，突出数据位置
• 折线下方添加半透明填充，增强趋势的视觉感知

LineChartBarData(
  spots: [const FlSpot(0, 45), const FlSpot(1, 52)],
  isCurved: true,
  color: Colors.deepPurple,
  barWidth: 3.w,
  dotData: FlDotData(show: true),
)

科目进度统计

科目进度模块的核心设计：

• 每个科目独立成项，底部保留16.h间距，区分不同科目
• 进度条高度设为8.h，圆角4.r，符合移动端精致化设计
• 科目名称与进度百分比左右对齐，信息展示更规整

Widget _buildSubjectStats() {
  final subjects = [
    {'name': '美术基础', 'progress': 0.75, 'color': Colors.blue},
    {'name': '音乐理论', 'progress': 0.62, 'color': Colors.green},
  ];
  return Container(padding: EdgeInsets.all(16.w));
}

进度条的个性化配置：

• 不同科目使用差异化配色，提升科目辨识度
• 进度百分比实时计算并取整，展示更直观
• 进度条背景用浅灰色，与主题色形成对比

LinearPercentIndicator(
  lineHeight: 8.h,
  percent: subject['progress'] as double,
  progressColor: subject['color'] as Color,
  backgroundColor: Colors.grey[200],
  barRadius: Radius.circular(4.r),
)

最近考试成绩

考试记录模块的设计要点：

• 采用Card+ListTile组合，提升每条记录的独立性
• 左侧圆形头像展示分数，用颜色区分成绩等级（≥80绿色，否则橙色）
• 副标题展示题目数量和用时，补充核心考试信息

Widget _buildRecentPerformance() {
  final exams = MockData.getExamRecords();
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(color: Colors.white),
  );
}

日期格式化的人性化设计：

• 优先展示"今天""昨天"等口语化表述，提升用户感知
• 7天内的记录显示"X天前"，超过7天显示月/日格式
• 日期文字用浅灰色小号字体，不抢核心信息风头

String _formatDate(DateTime date) {
  final now = DateTime.now();
  final difference = now.difference(date);
  if (difference.inDays == 0) return '今天';
  if (difference.inDays == 1) return '昨天';
  return '${difference.inDays}天前';
}

性能优化

统计页面包含多个图表和统计组件，需要注意性能优化。我们使用const构造函数减少不必要的重建，合理控制图表的复杂度。

数据更新机制

统计数据应该实时更新，反映用户最新的学习状况。我们可以使用状态管理或事件总线来实现数据的自动更新。

交互功能

为了提升用户体验，我们可以在统计图表上添加交互功能。例如，点击数据点显示详细信息，长按图表查看更多选项。

数据导出

统计页面可以提供数据导出功能，允许用户将学习数据导出为报告或分享给他人。这有助于用户进行学习分析和成果展示。

成就系统集成

统计数据可以与成就系统集成，当用户达到特定目标时自动解锁成就徽章，增强学习的成就感。

通过以上实现，我们创建了一个功能完善、视觉丰富的统计概览页面。这个页面不仅能够帮助用户全面了解自己的学习状况，还提供了直观的数据可视化和详细的分析功能，为用户的学习提供了有力的数据支持。

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