【OpenHarmony/HarmonyOs 】ArkUI 实现闪卡翻转记忆与掌握度统计：概念复习页面完整拆解

政治学科学习不仅要刷题，还要记概念。比如“人民当家作主”“公有制经济”“唯物辩证法”等知识点，都适合用闪卡反复记忆。本文结合 政治视界 项目的 FlashCardPage.ets，详细拆解如何用 ArkUI 实现闪卡筛选、翻转、掌握标记和学习统计 💡

一、闪卡功能定位

闪卡页面主要解决“概念复习”的问题。它和题库不同：

• 题库关注对错；
• 闪卡关注记忆和掌握；
• 题库适合检测；
• 闪卡适合复习。

项目中闪卡支持：

• 按分类筛选；
• 按年级筛选；
• 按知识点筛选；
• 卡片正反面翻转；
• 标记掌握/未掌握；
• 统计掌握数量；
• 记录学习会话。

二、闪卡数据模型

闪卡模型定义如下：

export interface FlashCard {
  id: number;
  front: string;
  back: string;
  category: string;
  grade: string;
  knowledgePoint: string;
  mastered: boolean;
  reviewCount: number;
}

front 是正面问题或概念，back 是背面解释。mastered 标识是否掌握，reviewCount 记录复习次数。

这个模型很适合做后续扩展，比如：

• 根据 reviewCount 做间隔复习；
• 根据 mastered 过滤未掌握卡片；
• 根据 knowledgePoint 做知识点复习计划。

三、页面状态设计

闪卡页面维护了当前卡片、翻转状态、筛选条件和统计信息：

@State flashCards: FlashCard[] = sampleFlashCards;
@State displayCards: FlashCard[] = [];
@State currentIndex: number = 0;
@State isFlipped: boolean = false;
@State selectedCategory: string = '全部';
@State selectedGrade: string = '全部';
@State selectedKnowledgePoint: string = '全部';
@State showOnlyMastered: boolean = false;
@State masteredCount: number = 0;
@State totalCount: number = 0;

这里有一个很好的设计：flashCards 是原始数据，displayCards 是当前筛选后用于展示的数据。这样切换筛选条件时，页面不会污染原始列表。

四、筛选闪卡

闪卡筛选和题库类似，也是逐层过滤：

getFilteredCards(): FlashCard[] {
  let filtered = this.flashCards;
  if (this.selectedCategory !== '全部') {
    filtered = filtered.filter((c: FlashCard) => c.category === this.selectedCategory);
  }
  if (this.selectedGrade !== '全部') {
    filtered = filtered.filter((c: FlashCard) => c.grade === this.selectedGrade);
  }
  if (this.selectedKnowledgePoint !== '全部') {
    filtered = filtered.filter((c: FlashCard) => c.knowledgePoint === this.selectedKnowledgePoint);
  }
  if (this.showOnlyMastered) {
    filtered = filtered.filter((c: FlashCard) => c.mastered);
  }
  return filtered;
}

筛选后同步展示数组：

syncDisplayCards(): void {
  this.displayCards = this.getFilteredCards();
  if (this.currentIndex >= this.displayCards.length) {
    this.currentIndex = 0;
  }
}

注意这里处理了索引越界问题。筛选条件变化后，原本第 10 张卡可能不存在了，必须重置。

五、卡片翻转实现

闪卡最核心的交互是翻转：

flipCard(): void {
  animateTo({
    duration: 400,
    curve: Curve.EaseInOut,
  }, () => {
    this.isFlipped = !this.isFlipped;
    this.markButtonsVisible = this.isFlipped;
  });
}

当 isFlipped 为 false 时展示正面，为 true 时展示背面。翻转后再显示“掌握/未掌握”等按钮，符合用户记忆流程：先回忆，再看答案，再标记掌握情况。

六、标记掌握

用户点击“已掌握”时：

markAsMastered(): void {
  const cards = this.getFilteredCards();
  if (cards.length === 0) {
    return;
  }
  const card = cards[this.currentIndex];
  card.mastered = true;
  card.reviewCount++;
  this.dataManager.setFlashcardMastered(card.id, true);
  this.dataManager.recordSession('flashcard', card.category);
  this.updateStats();
  this.syncDisplayCards();
  this.navigateNext();
}

这段逻辑包含多个动作：

• 更新卡片掌握状态；
• 复习次数 +1；
• 更新 DataManager 中的掌握统计；
• 记录一次闪卡学习会话；
• 刷新统计；
• 自动切换到下一张。

一个按钮背后其实完成了整个学习记录流程。

七、标记未掌握

未掌握逻辑类似：

markAsNotMastered(): void {
  const cards = this.getFilteredCards();
  if (cards.length === 0) {
    return;
  }
  const card = cards[this.currentIndex];
  card.mastered = false;
  card.reviewCount++;
  this.dataManager.setFlashcardMastered(card.id, false);
  this.dataManager.recordSession('flashcard', card.category);
  this.updateStats();
  this.syncDisplayCards();
  this.navigatePrev();
}

这里可以继续优化：未掌握的卡片可以进入待复习队列，后续优先出现。

八、统计掌握数量

页面中通过遍历卡片计算掌握数量：

updateStats(): void {
  let count = 0;
  for (let i = 0; i < this.flashCards.length; i++) {
    if (this.flashCards[i].mastered) {
      count++;
    }
  }
  this.masteredCount = count;
  this.totalCount = this.flashCards.length;
}

这样可以展示：

已掌握 12 / 30
掌握率 40%

对学生来说，这种反馈比“背了很多”更明确。

九、实现流程总结

定义 FlashCard 模型
  ↓
准备闪卡数据
  ↓
页面维护筛选状态和当前索引
  ↓
筛选生成 displayCards
  ↓
点击卡片翻转
  ↓
用户标记掌握/未掌握
  ↓
DataManager 记录掌握数和学习会话
  ↓
自动切换下一张

十、结语

闪卡模块让政治视界不只是一个刷题工具，而是一个“理解 + 记忆 + 检测”的学习系统。通过 ArkUI 的状态管理和动画能力，闪卡翻转、掌握标记、统计更新都可以做得很自然。

后续可以继续加入间隔复习算法，比如今天未掌握的卡片明天优先出现，连续掌握三次后降低出现频率。这样闪卡模块就能从普通记忆卡片升级为真正的智能复习系统 🌟