从进度可视化出发：基于 Flutter × OpenHarmony 的驾照学习助手实践

在学习类应用中，「进度感」往往比内容本身更能影响用户的持续投入。尤其是在驾照学习这类周期长、阶段明确的场景中，如果用户能够直观看到自己的学习成果与阶段位置，就更容易建立正反馈，从而坚持学习。

时光慢煮

717人浏览 · 2026-01-28 15:27:44

时光慢煮 · 2026-01-28 15:27:44 发布

从进度可视化出发：基于 Flutter × OpenHarmony 的驾照学习助手实践

前言

在学习类应用中，「进度感」往往比内容本身更能影响用户的持续投入。尤其是在驾照学习这类周期长、阶段明确的场景中，如果用户能够直观看到自己的学习成果与阶段位置，就更容易建立正反馈，从而坚持学习。

本文将结合一个 基于 Flutter × OpenHarmony 的驾照学习助手 实际开发案例，重点讲解 学习进度概览模块的设计与实现，并对核心 Flutter UI 代码进行详细解析，帮助你快速构建一个清晰、美观、可扩展的学习进度视图。

在这里插入图片描述

背景

随着 OpenHarmony 在国产操作系统生态中的不断成熟，越来越多的应用开始探索 “一次开发，多端运行” 的跨端方案。对于教育类、工具类 App 来说，Flutter 凭借：

高性能的自绘 UI
成熟的组件生态
良好的跨平台一致性

成为与 OpenHarmony 结合的理想选择。

在本项目中，我们构建的是一个 驾照学习助手，核心功能包括：

学习内容分类（科目一～科目四）
学习进度记录与展示
阶段性目标反馈

其中，「学习进度概览」模块是首页最重要的视觉与功能入口。

Flutter × OpenHarmony 跨端开发介绍

为什么选择 Flutter？

Flutter 的优势非常契合 OpenHarmony 的应用特性：

UI 自绘，平台差异小
Flutter 不依赖系统原生控件，能在 OpenHarmony 上保持与 Android/iOS 高度一致的 UI 表现。
Widget 组合式开发
非常适合构建类似“进度卡片”“仪表盘”“统计视图”这类复杂但规则清晰的界面。
与 OpenHarmony 生态适配成本低
通过 Flutter for OpenHarmony（或相关适配方案），可快速接入系统能力。

架照学习助手的 UI 设计目标

在进度概览模块中，我们的设计目标是：

一眼看清 总体进度
明确区分 各科目完成情况
颜色传达状态（完成 / 进行中 / 未开始）
保持代码结构清晰，方便后期数据驱动改造

在这里插入图片描述

开发核心代码（详细解析）

下面是本模块的核心实现代码，我们将分块进行解析。

在这里插入图片描述

一、构建学习进度概览整体结构

/// 构建学习进度概览
Widget _buildProgressOverview(ThemeData theme) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        '学习进度',
        style: theme.textTheme.titleLarge?.copyWith(
          fontWeight: FontWeight.bold,
        ),
      ),

解析

使用 Column 作为整体布局容器，纵向排列内容
crossAxisAlignment: CrossAxisAlignment.start
保证左对齐，符合信息阅读习惯
标题直接复用 ThemeData，保证在 OpenHarmony 深色 / 浅色模式下风格统一

二、进度卡片容器设计

const SizedBox(height: 16),
Card(
  elevation: 2,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),

解析

Card 组件天然适合信息聚合展示
圆角 16 + 轻微阴影：
- 在 OpenHarmony 桌面 / 平板设备上层次感更好
保持 Material 风格，同时兼容系统主题

三、总体学习进度展示

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text(
      '总体进度',
      style: theme.textTheme.bodyMedium,
    ),
    Text(
      '35%',
      style: theme.textTheme.bodyMedium?.copyWith(
        fontWeight: FontWeight.bold,
        color: theme.colorScheme.primary,
      ),
    ),
  ],
),

解析

使用 Row + spaceBetween：
- 左侧：说明文本
- 右侧：数值强调
进度百分比使用 primary color：
- 建立视觉焦点
- 与进度条颜色保持一致

在这里插入图片描述

四、自定义进度条实现

Container(
  height: 8,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(4),
    color: theme.colorScheme.surfaceVariant,
  ),
  child: Container(
    height: 8,
    width: 0.35 * double.infinity,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(4),
      color: theme.colorScheme.primary,
    ),
  ),
),

解析（重点）

外层 Container：背景进度槽
内层 Container：实际进度
高度 8：
- 视觉轻量
- 不喧宾夺主
当前示例中 35% 通过宽度表达

实际项目中可替换为 LayoutBuilder + 百分比计算

这种方式 比 LinearProgressIndicator 更灵活，更适合定制化 UI。

五、各科目进度列表

Column(
  children: [
    _buildProgressItem('科目一', 100, Colors.green, theme),
    const SizedBox(height: 12),
    _buildProgressItem('科目二', 45, theme.colorScheme.primary, theme),
    const SizedBox(height: 12),
    _buildProgressItem('科目三', 0, Colors.grey, theme),
    const SizedBox(height: 12),
    _buildProgressItem('科目四', 0, Colors.grey, theme),
  ],
),

设计思路

颜色即状态
- 绿色：已完成
- 主色：进行中
- 灰色：未开始
每个科目解耦成独立组件，便于后期：
- 动态数据
- 动画
- 点击跳转详情页

六、单个进度项组件封装

/// 构建单个进度项
Widget _buildProgressItem(
  String title,
  int progress,
  Color color,
  ThemeData theme,
) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(
        title,
        style: theme.textTheme.bodyMedium,
      ),
      Text(
        '$progress%',
        style: theme.textTheme.bodyMedium?.copyWith(
          fontWeight: FontWeight.bold,
          color: color,
        ),
      ),
    ],
  );
}