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