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

【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做知识点复习计划。

三、页面状态设计

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

@StateflashCards: FlashCard[] = sampleFlashCards;@StatedisplayCards: FlashCard[] = [];@StatecurrentIndex: number =0;@StateisFlipped: boolean = false;@StateselectedCategory: string ='全部';@StateselectedGrade: string ='全部';@StateselectedKnowledgePoint: string ='全部';@StateshowOnlyMastered: boolean = false;@StatemasteredCount: number =0;@StatetotalCount: 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); }returnfiltered; }

筛选后同步展示数组：

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 {constcards =this.getFilteredCards();if(cards.length ===0) {return; }constcard = 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 {constcards =this.getFilteredCards();if(cards.length ===0) {return; }constcard = 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 的状态管理和动画能力，闪卡翻转、掌握标记、统计更新都可以做得很自然。

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