Flutter for OpenHarmony学习笔记应用开发实战

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

🚀 Flutter for OpenHarmony 实战：打造智能记忆卡片学习应用

大家好！今天我要带大家一起开发一个超级实用的学习工具 —— 基于 Flutter for OpenHarmony 的智能记忆卡片应用！📚 这个应用不仅能帮你高效学习，还能利用艾宾浩斯遗忘曲线帮你科学记忆，绝对是学生党和程序员的福音！

---

📖 项目概述：我们要构建什么？

你是不是也有这样的困扰：学过的知识转头就忘？背单词背了又忘？面试前复习知识点总是记不住？😫

别担心！今天我们要开发的这个 「智学卡片」 APP 就是来解决这个问题的！它是一个基于 Flutter for OpenHarmony 开发的学习笔记 / 记忆卡片应用，主要功能包括：

✨ 瀑布流展示学习卡片 —— 各种知识点一目了然，分类清晰
✨ 智能记忆复习系统 —— 基于艾宾浩斯遗忘曲线，科学安排复习时间
✨ 本地学习进度存储 —— 再也不怕学习进度丢失啦
✨ 在线学习资源获取 —— 一键获取优质学习内容

怎么样，是不是看起来就很专业？接下来让我们一步步拆解这个项目！💪

---

🎯 核心功能一览

功能模块	实现库	核心能力
🌊 瀑布流布局	flutter_staggered_grid_view	错落有致的卡片展示
💾 本地存储	shared_preferences	学习进度持久化保存
🎨 SVG 图标	flutter_svg	精美的矢量图标展示
🌐 网络请求	dio	获取在线学习资源

---

💡 为什么选择这四个库？

1️⃣ flutter_staggered_grid_view —— 瀑布流布局神器

为什么选它？因为普通的 GridView 太死板了！每个卡片都是一样高，看起来很单调。而这个库可以让我们的学习卡片有不同的高度，看起来就像 Pinterest 一样美观！而且它已经完美适配了 OpenHarmony 平台，性能杠杠的！🚀

2️⃣ shared_preferences —— 轻量级存储方案

学习进度这种小数据，没必要搞数据库那么复杂！shared_preferences 就像一个小抽屉，把我们的学习记录、卡片掌握程度都存在里面，简单好用，跨平台还兼容！📦

3️⃣ flutter_svg —— 矢量图标专家

APP 要好看，图标不能少！flutter_svg 让我们直接使用 SVG 矢量图，放大缩小都不模糊，还能改颜色，比 PNG 图片好用太多了！🎨

4️⃣ dio —— 网络请求全能王

获取在线学习资源怎么能少了 dio？拦截器、取消请求、FormData、超时设置... 它全都有！而且已经有 OpenHarmony 适配版本，网络请求一把梭！🌐

---

📦 第一步：环境配置

1.1 添加依赖

打开 pubspec\.yaml，把这四个宝贝加进去：

dependencies:
  flutter:
    sdk: flutter
  # 瀑布流布局（OpenHarmony 适配版）
  flutter_staggered_grid_view_ohos:
    git:
      url: https://atomgit.com/openharmony-sig/flutter_packages.git
      path: packages/flutter_staggered_grid_view
  # 本地存储
  shared_preferences_ohos:
    git:
      url: https://atomgit.com/openharmony-sig/flutter_packages.git
      path: packages/shared_preferences
  # SVG图标
  flutter_svg_ohos:
    git:
      url: https://atomgit.com/openharmony-sig/flutter_svg.git
  # 网络请求
  dio_ohos:
    git:
      url: https://atomgit.com/openharmony-sig/flutter_dio.git

1.2 权限配置

网络请求需要 INTERNET 权限，在 ohos/entry/src/main/module\.json5 中添加：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:network_reason",
        "usedScene": {
          "abilities": ["EntryAbility"],
          "when": "inuse"
        }
      }
    ]
  }
}

1.3 执行安装

一行命令搞定：

flutter pub get

---

🧩 第二步：分模块详解

2.1 数据模型：学习卡片

首先，我们得定义学习卡片的数据结构，一张卡片应该包含什么呢？

class FlashCard {
  final String id;
  final String question;
  final String answer;
  final String category;
  final int masteryLevel; // 0-5 掌握程度
  final DateTime nextReview; // 下次复习时间
  
  FlashCard({
    required this.id,
    required this.question,
    required this.answer,
    required this.category,
    this.masteryLevel = 0,
    required this.nextReview,
  });
}

看，5 行代码就定义好了！每个卡片有问题、答案、分类、掌握程度和下次复习时间，完美！📝

2.2 瀑布流布局实现

重头戏来了！用 flutter_staggered_grid_view 实现美美的瀑布流：

StaggeredGrid.count(
  crossAxisCount: 2,
  mainAxisSpacing: 12,
  crossAxisSpacing: 12,
  children: cards.map((card) => _buildCard(card)).toList(),
)

就这么简单！crossAxisCount 设为 2 就是两列，然后给每个卡片不同的高度，瀑布流就出来啦！是不是超简单？🌊

然后我们来构建单个卡片：

Widget _buildCard(FlashCard card) {
  return Card(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(card.question, style: titleStyle),
          const SizedBox(height: 8),
          Text(card.category, style: categoryStyle),
        ],
      ),
    ),
  );
}

完美！每个卡片都有问题和分类标签，看起来清爽又专业！✨

2.3 SVG 图标展示

用 flutter_svg 展示精美的矢量图标：

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/study.svg',
  height: 24,
  width: 24,
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)

看到没？还能直接改颜色！同一个图标想变什么颜色就变什么颜色，太方便了有没有！🎨

2.4 本地存储学习进度

用 shared_preferences 保存学习进度，下次打开还能接着学：

final prefs = await SharedPreferences.getInstance();
await prefs.setInt('cards_studied', totalStudied);
await prefs.setStringList('mastered_cards', masteredIds);

就三行代码！把学习数据存起来，再也不怕 APP 关掉进度就没了！💾

读取的时候也很简单：

final prefs = await SharedPreferences.getInstance();
final totalStudied = prefs.getInt('cards_studied') ?? 0;
final masteredCards = prefs.getStringList('mastered_cards') ?? [];

2.5 网络请求获取学习资源

用 dio 从服务器获取最新的学习卡片：

final dio = Dio();
final response = await dio.get(
  'https://api.example.com/flashcards',
  queryParameters: {'category': 'flutter'},
);
final cards = (response.data as List).map((j) => FlashCard.fromJson(j)).toList();

搞定！一行网络请求，学习资源就到手了！还能按分类筛选，太智能了！🌐

2.6 记忆复习功能

最核心的功能来了！基于艾宾浩斯遗忘曲线的智能复习：

DateTime calculateNextReview(int masteryLevel) {
  final intervals = [1, 2, 4, 7, 15, 30]; // 艾宾浩斯间隔天数
  final days = intervals[masteryLevel.clamp(0, 5)];
  return DateTime.now().add(Duration(days: days));
}

根据掌握程度计算下次复习时间，掌握得越好，间隔越长！科学记忆就是这么简单！🧠

---

🏆 第三步：完整实现总结

3.1 项目结构

lib/
├── models/
│   └── flash_card.dart          # 卡片数据模型
├── services/
│   ├── storage_service.dart     # 本地存储服务
│   └── api_service.dart         # 网络请求服务
├── widgets/
│   ├── card_grid.dart           # 瀑布流卡片网格
│   └── flash_card_widget.dart   # 单个卡片组件
└── pages/
    ├── home_page.dart           # 首页
    ├── review_page.dart         # 复习页面
    └── main.dart                # 入口文件

3.2 核心亮点总结

✅ 瀑布流布局 —— 视觉效果拉满，学习卡片错落有致
✅ 智能记忆算法 —— 艾宾浩斯遗忘曲线，科学复习不盲目
✅ 数据持久化 —— 学习进度自动保存，随时续学
✅ 在线资源同步 —— 一键获取最新学习内容
✅ 精美图标 —— SVG 矢量图标，颜值与性能并存

3.3 运行效果

1. 打开 APP，瀑布流展示所有学习卡片

2. 点击卡片进入详情，查看问题和答案

3. 标记掌握程度，系统自动安排下次复习

4. 复习页面显示今日待复习卡片

5. 所有学习数据自动保存到本地

---

🎉 写在最后

怎么样？跟着这篇文章，你也能轻松开发出一个功能完整的 Flutter for OpenHarmony 学习应用！这四个第三方库真的是太好用了，大大提升了我们的开发效率！🚀

记住哦，学习最好的方式就是动手实践！赶紧把代码跑起来，在 OpenHarmony 设备上试试效果吧！

如果这篇文章对你有帮助，别忘了点赞收藏分享！有问题欢迎在评论区交流～我们下期再见！👋

欢迎加入开源鸿蒙跨平台社区，一起学习成长：https://openharmonycrossplatform.csdn.net