在艺考备考类应用中，学情数据可视化是驱动学生调整复习策略的核心模块。本文聚焦于基于Flutter与OpenHarmony跨平台框架，探讨如何构建一个高内聚、低耦合的成绩分析视图。该视图涵盖趋势追踪、区间分布、多维对比及竞争排名等关键数据维度，旨在通过直观的图表交互提升用户的学习复盘效率。

一、 视图架构与状态管理

成绩分析页面采用StatefulWidget作为基础容器，以支持时间维度的动态切换与图表数据的异步刷新。在架构设计上，将不同图表模块拆分为独立的私有渲染方法，从而降低单一build方法的复杂度。

enum TimeRange { weekly, monthly, quarterly, all }

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

  @override
  State<PerformanceAnalyticsView> createState() => _AnalyticsViewState();
}

class _AnalyticsViewState extends State<PerformanceAnalyticsView> {
  TimeRange _activeRange = TimeRange.monthly;
  
  final Map<TimeRange, String> _rangeLabels = {
    TimeRange.weekly: '近一周',
    TimeRange.monthly: '近一月',
    TimeRange.quarterly: '近三月',
    TimeRange.all: '历史全部',
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F7FA),
      appBar: AppBar(
        title: const Text('学情分析'),
        centerTitle: true,
        elevation: 0,
        actions: [
          PopupMenuButton<TimeRange>(
            onSelected: (range) => setState(() => _activeRange = range),
            itemBuilder: (ctx) => _rangeLabels.entries.map((e) {
              return PopupMenuItem(
                value: e.key,
                child: Text(e.value),
              );
            }).toList(),
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.w),
              child: Row(
                children: [
                  Text(_rangeLabels[_activeRange]!, style: TextStyle(fontSize: 14.sp)),
                  Icon(Icons.arrow_drop_down, size: 20.sp),
                ],
              ),
            ),
          )
        ],
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            _renderTrendChart(),
            SizedBox(height: 16.h),
            _renderDistributionBar(),
            SizedBox(height: 16.h),
            _renderSubjectProgress(),
            SizedBox(height: 16.h),
            _renderLeaderboardList(),
          ],
        ),
      ),
    );
  }
}

上述代码中，通过引入TimeRange枚举替代了原有的字符串列表，增强了类型安全性。同时，利用flutter_screenutil的扩展方法（如.w, .h, .sp）实现全局的屏幕适配，确保在OpenHarmony不同尺寸设备上的UI一致性。

二、 核心图表组件封装

数据可视化主要依赖fl_chart库。为了保持代码整洁，将折线图与柱状图的配置逻辑封装在独立的Widget构建方法中。

1. 成绩趋势折线图

折线图用于展示分数随时间的波动情况。工程实现上，隐藏了冗余的坐标轴与垂直网格线，仅保留水平参考线，以突出数据曲线本身。数据点采用实心圆与白色描边结合的设计，提升触控反馈的视觉辨识度。

Widget _renderTrendChart() {
  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [
        BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 10, offset: const Offset(0, 4))
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('分数波动趋势', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600)),
        SizedBox(height: 16.h),
        SizedBox(
          height: 220.h,
          child: LineChart(
            LineChartData(
              gridData: FlGridData(
                show: true,
                drawVerticalLine: false,
                horizontalInterval: 20,
                getDrawingHorizontalLine: (value) => FlLine(color: Colors.grey[200], strokeWidth: 1),
              ),
              titlesData: FlTitlesData(
                rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
                topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
                leftTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    interval: 20,
                    getTitlesWidget: (val, meta) => Text('${val.toInt()}', style: TextStyle(fontSize: 10.sp, color: Colors.grey)),
                  ),
                ),
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    interval: 1,
                    getTitlesWidget: (val, meta) => Text('考${val.toInt() + 1}', style: TextStyle(fontSize: 10.sp, color: Colors.grey)),
                  ),
                ),
              ),
              borderData: FlBorderData(show: false),
              lineBarsData: [
                LineChartBarData(
                  spots: const [
                    FlSpot(0, 72), FlSpot(1, 78), FlSpot(2, 75), FlSpot(3, 85), FlSpot(4, 91)
                  ],
                  isCurved: true,
                  color: const Color(0xFF3B82F6),
                  barWidth: 3,
                  dotData: FlDotData(
                    show: true,
                    getDotPainter: (spot, percent, bar, index) => FlDotCirclePainter(
                      radius: 4,
                      color: Colors.white,
                      strokeWidth: 2,
                      strokeColor: const Color(0xFF3B82F6),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

2. 得分区间柱状图

柱状图用于分析用户在各个分数段的题目掌握情况。通过构建ScoreBucket数据模型，利用循环动态生成BarChartGroupData，避免了硬编码带来的维护成本。不同分数段采用语义化颜色（红、橙、蓝、绿）进行区分。

class ScoreBucket {
  final String label;
  final int count;
  final Color color;
  ScoreBucket(this.label, this.count, this.color);
}

Widget _renderDistributionBar() {
  final buckets = [
    ScoreBucket('60-70', 2, Colors.redAccent),
    ScoreBucket('70-80', 5, Colors.orange),
    ScoreBucket('80-90', 8, const Color(0xFF3B82F6)),
    ScoreBucket('90-100', 3, Colors.green),
  ];

  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 10, offset: const Offset(0, 4))],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('错题区间分布', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600)),
        SizedBox(height: 16.h),
        SizedBox(
          height: 200.h,
          child: BarChart(
            BarChartData(
              alignment: BarChartAlignment.spaceAround,
              maxY: 10,
              barTouchData: BarTouchData(enabled: false),
              titlesData: FlTitlesData(
                show: true,
                leftTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 30,
                    interval: 2,
                    getTitlesWidget: (val, meta) => Text('${val.toInt()}', style: TextStyle(fontSize: 10.sp, color: Colors.grey)),
                  ),
                ),
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    getTitlesWidget: (val, meta) => Text(buckets[val.toInt()].label, style: TextStyle(fontSize: 10.sp, color: Colors.grey)),
                  ),
                ),
                topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
                rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
              ),
              gridData: const FlGridData(show: false),
              borderData: FlBorderData(show: false),
              barGroups: buckets.asMap().entries.map((entry) {
                return BarChartGroupData(
                  x: entry.key,
                  barRods: [
                    BarChartRodData(
                      toY: entry.value.count.toDouble(),
                      color: entry.value.color,
                      width: 22.w,
                      borderRadius: const BorderRadius.vertical(top: Radius.circular(6)),
                    )
                  ],
                );
              }).toList(),
            ),
          ),
        ),
      ],
    ),
  );
}

三、 自定义数据展示组件

除了标准图表，页面还包含科目对比与成绩排名模块。这些模块通过组合基础Widget实现高度定制化的UI效果。

1. 科目对比进度条

采用双层Stack结构结合FractionallySizedBox实现进度条。底层灰色代表满分基准，上层蓝色代表用户实际得分，通过宽度比例直观反映得分率。这种方式比直接计算像素宽度更具响应式优势。

class SubjectMetric {
  final String name;
  final double userScore;
  final double avgScore;
  SubjectMetric(this.name, this.userScore, this.avgScore);
}

Widget _renderSubjectProgress() {
  final metrics = [
    SubjectMetric('美术素描', 88.0, 75.0),
    SubjectMetric('乐理知识', 92.0, 78.0),
    SubjectMetric('舞蹈形体', 76.0, 72.0),
    SubjectMetric('播音发声', 85.0, 80.0),
  ];

  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 10, offset: const Offset(0, 4))],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('科目能力对比', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600)),
        SizedBox(height: 16.h),
        ...metrics.map((m) => Padding(
          padding: EdgeInsets.only(bottom: 16.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(m.name, style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w500)),
                  Text('${m.userScore.toInt()}分', style: TextStyle(fontSize: 14.sp, color: const Color(0xFF3B82F6), fontWeight: FontWeight.bold)),
                ],
              ),
              SizedBox(height: 8.h),
              LayoutBuilder(
                builder: (context, constraints) {
                  return Stack(
                    children: [
                      Container(
                        height: 12.h,
                        decoration: BoxDecoration(color: Colors.grey[200], borderRadius: BorderRadius.circular(6.r)),
                      ),
                      FractionallySizedBox(
                        widthFactor: m.avgScore / 100,
                        child: Container(
                          height: 12.h,
                          decoration: BoxDecoration(color: Colors.grey[400], borderRadius: BorderRadius.circular(6.r)),
                        ),
                      ),
                      FractionallySizedBox(
                        widthFactor: m.userScore / 100,
                        child: Container(
                          height: 12.h,
                          decoration: BoxDecoration(color: const Color(0xFF3B82F6), borderRadius: BorderRadius.circular(6.r)),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ],
          ),
        )).toList(),
      ],
    ),
  );
}

2. 成绩排名列表

排名列表通过isMe布尔值区分当前用户与竞争对手。针对前三名，采用金银铜牌的语义化颜色映射，增强竞技氛围。列表项使用Container包裹，为当前用户添加高亮背景与边框。

class RankEntry {
  final int position;
  final String studentName;
  final int totalScore;
  final bool isCurrentUser;
  RankEntry(this.position, this.studentName, this.totalScore, this.isCurrentUser);
}

Color _resolveMedalColor(int pos) {
  switch (pos) {
    case 1: return const Color(0xFFFFC107); // 金
    case 2: return const Color(0xFF9E9E9E); // 银
    case 3: return const Color(0xFFCD7F32); // 铜
    default: return const Color(0xFF3B82F6);
  }
}

Widget _renderLeaderboardList() {
  final entries = [
    RankEntry(1, '张同学', 95, false),
    RankEntry(2, '李同学', 93, false),
    RankEntry(3, '我', 92, true),
    RankEntry(4, '王同学', 90, false),
    RankEntry(5, '赵同学', 88, false),
  ];

  return Container(
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 10, offset: const Offset(0, 4))],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('班级排行榜', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600)),
        SizedBox(height: 16.h),
        ...entries.map((e) {
          return Container(
            margin: EdgeInsets.only(bottom: 8.h),
            padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 10.h),
            decoration: BoxDecoration(
              color: e.isCurrentUser ? const Color(0xFFEFF6FF) : Colors.transparent,
              borderRadius: BorderRadius.circular(8.r),
              border: e.isCurrentUser ? Border.all(color: const Color(0xFF3B82F6), width: 1) : null,
            ),
            child: Row(
              children: [
                Container(
                  width: 28.w,
                  height: 28.w,
                  decoration: BoxDecoration(color: _resolveMedalColor(e.position), shape: BoxShape.circle),
                  alignment: Alignment.center,
                  child: Text('${e.position}', style: TextStyle(color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.bold)),
                ),
                SizedBox(width: 12.w),
                Expanded(
                  child: Text(
                    e.studentName,
                    style: TextStyle(
                      fontSize: 14.sp,
                      fontWeight: e.isCurrentUser ? FontWeight.bold : FontWeight.normal,
                      color: e.isCurrentUser ? const Color(0xFF3B82F6) : Colors.black87,
                    ),
                  ),
                ),
                Text(
                  '${e.totalScore}分',
                  style: TextStyle(
                    fontSize: 14.sp,
                    fontWeight: FontWeight.bold,
                    color: e.isCurrentUser ? const Color(0xFF3B82F6) : Colors.black87,
                  ),
                ),
              ],
            ),
          );
        }).toList(),
      ],
    ),
  );
}

四、 响应式适配与交互优化

在OpenHarmony设备上，屏幕尺寸与分辨率差异较大。除了全局引入flutter_screenutil进行尺寸初始化外，在图表组件中大量使用了LayoutBuilder与FractionallySizedBox。这种基于父容器约束的相对布局方式，确保了进度条、柱状图宽度在不同折叠屏或平板设备上的完美自适应。

在交互层面，通过PopupMenuButton实现时间维度的无感切换，结合setState触发局部重建。针对图表数据，后续可接入fl_chart的内置动画控制器（如LineChartBarData的animationDuration），在切换时间范围时提供平滑的曲线过渡效果，进一步提升数据可视化的沉浸感。对于学情报告的导出，可通过集成pdf与printing插件，将当前渲染的Widget树转换为PDF文档，满足用户离线分享与存档的需求。