【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 的状态管理和动画能力，闪卡翻转、掌握标记、统计更新都可以做得很自然。
后续可以继续加入间隔复习算法，比如今天未掌握的卡片明天优先出现，连续掌握三次后降低出现频率。这样闪卡模块就能从普通记忆卡片升级为真正的智能复习系统 🌟