Flutter for OpenHarmony 编程题库刷题APP技术文章

有没有跟我一样的小伙伴，刷算法题的时候总觉得手机端体验太差？要么广告满天飞，要么代码展示一团糟？🤦‍♂️ 今天咱们就自己动手丰衣足食！这款编程题库刷题 APP专门针对 OpenHarmony 平台优化，主打：📱 随时随地刷算法题（地铁上、排队时都能用）💻 完美的代码展示体验（语法高亮，支持多种语言）📊 刷题进度追踪（看着进度条满满的成就感！lib/├── models/ # 数据模型├──

KKei1638

412人浏览 · 2026-05-09 23:29:20

KKei1638 · 2026-05-09 23:29:20 发布

Flutter for OpenHarmony 编程题库刷题APP技术文章

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

🚀 Flutter for OpenHarmony 实战：打造程序员必备的编程题库刷题 APP

哈喽各位鸿蒙开发者们！👋 今天带大家从零开始，用 Flutter 打造一款专为程序员面试准备的编程题库刷题 APP！不管你是准备秋招还是跳槽，这款 APP 绝对是你的刷题神器～支持左右滑动快捷收藏、代码语法高亮展示、刷题进度本地持久化，简直不要太好用！✨

📖 项目概述

有没有跟我一样的小伙伴，刷算法题的时候总觉得手机端体验太差？要么广告满天飞，要么代码展示一团糟？🤦‍♂️ 今天咱们就自己动手丰衣足食！

这款编程题库刷题 APP专门针对 OpenHarmony 平台优化，主打：

📱 随时随地刷算法题（地铁上、排队时都能用）
💻 完美的代码展示体验（语法高亮，支持多种语言）
⭐ 智能收藏和错题本（再也不怕找不到好题了）
📊 刷题进度追踪（看着进度条满满的成就感！）
🔄 左右滑动快捷操作（收藏 / 跳过一气呵成）

在这里插入图片描述

🎯 核心功能

模块	功能描述	技术亮点
📋 题目列表	算法题目展示，难度分级（简单 / 中等 / 困难）	flutter_slidable 滑动操作
📝 题目详情	代码展示 + 答题界面，支持语法高亮	flutter_html 富文本渲染
💾 状态管理	全局状态统一管理，页面间数据同步	Get 轻量状态管理
🗄️ 数据存储	刷题记录、收藏题目、错题本地持久化	sqflite_ohos 鸿蒙数据库

💡 库选择理由（OpenHarmony 专属适配！）

选对第三方库，开发效率直接翻倍！这四个库都是经过 OpenHarmony 社区验证的靠谱选择～👍

1️⃣ flutter_slidable - 滑动操作神器

✅ OpenHarmony 完美适配，手势丝滑不卡顿
✅ 支持左右双向滑动，自定义操作按钮
✅ 动画效果流畅，跟原生体验一模一样
✅ 代码侵入性极低，几行代码就搞定

2️⃣ flutter_html - 代码展示救星

✅ 支持 HTML 标签渲染，代码语法高亮杠杠的
✅ 兼容 OpenHarmony 的 WebView 渲染引擎
✅ 支持自定义样式，想怎么高亮就怎么高亮
✅ 支持图片、链接、表格等富文本元素

3️⃣ get - 轻量状态管理 yyds

✅ 体积超小！性能吊打其他状态管理库
✅ OpenHarmony 平台深度优化
✅ 路由、状态、依赖注入三合一
✅ 学习成本极低，新手也能 5 分钟上手

4️⃣ sqflite_ohos - 鸿蒙专属数据库

✅ 官方适配！OpenHarmony 平台唯一选择
✅ 支持 SQLite 完整语法，跟 Android 端用法一致
✅ 数据持久化安全可靠，APP 重启不丢失
✅ 支持事务和批量操作，性能优异

📦 环境配置

老规矩，先把依赖安排上！打开你的 pubspec\.yaml，复制粘贴下面的内容：

dependencies:
  flutter:
    sdk: flutter
  # 滑动操作库
  flutter_slidable: ^3.0.1
  # HTML渲染+代码高亮
  flutter_html: ^3.0.0-beta.2
  # 状态管理神器
  get: ^4.6.6
  # 鸿蒙数据库（重点！这是OpenHarmony专属）
  sqflite_ohos: ^0.1.0
  # 代码高亮样式
  flutter_highlight: ^0.7.0

然后在 OpenHarmony 的 config\.json 里加个存储权限：

"reqPermissions": [
  {"name": "ohos.permission.DATA_STORAGE"}
]

搞定！执行 flutter pub get 就可以开始撸代码了～🎉

🧩 分模块详解

1. 题目数据模型 📊

首先定义一个简洁的题目数据结构，包含题目基本信息和刷题状态：

class Problem {
  final String id;
  final String title;
  final String description; // HTML格式的题目描述
  final String codeSnippet; // HTML格式的代码示例
  final Difficulty difficulty;
  bool isFavorited;
  bool isCompleted;
  bool isWrong;
  
  Problem({required this.id, required this.title, 
    required this.description, required this.codeSnippet,
    required this.difficulty, this.isFavorited = false,
    this.isCompleted = false, this.isWrong = false});
}

2. flutter_slidable - 滑动操作实现 ✨

这是我最喜欢的功能！题目卡片左滑收藏，右滑跳过，跟刷短视频一样爽～😎

在这里插入图片描述

Slidable(
  key: Key(problem.id),
  // 左滑 - 收藏操作
  startActionPane: ActionPane(
    motion: const ScrollMotion(),
    children: [
      SlidableAction(
        onPressed: (_) => controller.toggleFavorite(problem),
        backgroundColor: Colors.orange,
        icon: Icons.star,
        label: '收藏',
      ),
    ],
  ),
  // 右滑 - 跳过/错题操作
  endActionPane: ActionPane(
    motion: const ScrollMotion(),
    children: [
      SlidableAction(
        onPressed: (_) => controller.markAsWrong(problem),
        backgroundColor: Colors.red,
        icon: Icons.close,
        label: '错题',
      ),
    ],
  ),
  child: ProblemCard(problem: problem), // 你的题目卡片UI
)

就这么几行代码！滑动效果直接拉满，用户体验瞬间提升一个档次～🚀

3. flutter_html - 代码语法高亮 🎨

刷题最烦的是什么？代码展示一团糟！用 flutter_html 直接渲染带语法高亮的 HTML 代码，爽到飞起！

Widget buildCodeDisplay(String codeHtml) {
  return Html(
    data: codeHtml,
    style: {
      'code': Style(
        backgroundColor: Colors.grey[900],
        fontFamily: 'monospace',
        fontSize: FontSize(14),
      ),
      '.hljs-keyword': Style(color: Colors.purple),
      '.hljs-string': Style(color: Colors.green),
      '.hljs-number': Style(color: Colors.orange),
    },
  );
}

看到没？代码关键字、字符串、数字都有不同颜色，跟 IDE 里的体验一模一样！🌈

4. Get - 轻量状态管理 🎯

用 Get 做状态管理，真的是太香了！一个 Controller 搞定所有页面状态，代码清爽到爆炸～

class ProblemController extends GetxController {
  final RxList<Problem> problems = <Problem>[].obs;
  final RxList<Problem> favorites = <Problem>[].obs;
  
  void toggleFavorite(Problem problem) {
    problem.isFavorited = !problem.isFavorited;
    problem.isFavorited 
      ? favorites.add(problem) 
      : favorites.remove(problem);
    update(); // 自动刷新UI
    saveToDatabase(); // 同步到数据库
  }
}

然后在页面里直接用，几行代码搞定响应式更新：

final controller = Get.put(ProblemController());
// 绑定UI，数据变化自动刷新
Obx(() => Text('已收藏: ${controller.favorites.length}题'))

5. sqflite_ohos - 鸿蒙本地存储 💾

重点来了！OpenHarmony 平台的本地存储，用官方适配的 sqflite_ohos 就对了！

在这里插入图片描述

class DatabaseHelper {
  static Database? _db;
  
  Future<Database> get db async {
    if (_db != null) return _db!;
    _db = await openDatabase(
      'leetcode.db',
      version: 1,
      onCreate: (db, version) async {
        await db.execute('''
          CREATE TABLE problems (
            id TEXT PRIMARY KEY,
            title TEXT,
            isFavorited INTEGER,
            isCompleted INTEGER,
            isWrong INTEGER
          )
        ''');
      },
    );
    return _db!;
  }
}

保存刷题记录也是几行代码的事儿：

Future<void> saveProgress(Problem problem) async {
  final db = await database;
  await db.insert('problems', {
    'id': problem.id,
    'isFavorited': problem.isFavorited ? 1 : 0,
    'isCompleted': problem.isCompleted ? 1 : 0,
  }, conflictAlgorithm: ConflictAlgorithm.replace);
}

6. 刷题逻辑实现 🧠

最后把所有东西串起来，实现完整的刷题流程：

void submitAnswer(Problem problem, String answer) {
  if (checkAnswer(problem, answer)) {
    problem.isCompleted = true;
    Get.snackbar('🎉 恭喜！', '答对啦！继续加油~');
  } else {
    problem.isWrong = true;
    Get.snackbar('😅 加油', '答案不对哦，已加入错题本');
  }
  controller.updateProblem(problem);
  DatabaseHelper().saveProgress(problem);
}

🏆 完整实现总结

📁 项目结构

lib/
├── models/          # 数据模型
│   └── problem.dart
├── controllers/     # Get状态管理
│   └── problem_controller.dart
├── database/        # sqflite_ohos数据库
│   └── database_helper.dart
├── pages/           # 页面
│   ├── problem_list_page.dart
│   ├── problem_detail_page.dart
│   └── favorite_page.dart
└── main.dart