Flutter闪卡App如何实现未掌握单词循环复习功能

核心逻辑框架 #

不用搞复杂的算法，整个流程靠两个队列就能跑通，逻辑完全贴合你的需求：

• 初始待学队列：存所有还没展示过的新单词，按你预设的顺序排列
• 复习循环队列：存所有用户标记过「我不认识」的单词，是循环推送的核心
• 卡片取卡优先级永远是：先取复习队列的内容，复习队列空了再取新单词，两个队列都空就代表所有单词都掌握，直接展示完成提示。

固定流转规则，照着写分支判断就不会出错

1. 触发切卡时，先检查复习队列是否有内容：有就取队列第一个元素作为当前展示卡片
2. 复习队列为空时，检查初始待学队列是否有内容：有就取队列第一个元素作为当前展示卡片
3. 两个队列都为空，直接展示学习完成页
4. 用户点击「我认识」：当前卡片如果来自复习队列，代表已经掌握，不再放回队列；如果来自初始待学队列，直接进入下一张即可
5. 用户点击「我不认识」：不管当前卡片来自哪个队列，都把它加到复习队列的末尾，等待后续循环展示

可直接复用的代码实现 #

不用一开始就上复杂的状态管理框架，用基础的StatefulWidget就能实现完整功能，等跑通逻辑再考虑重构。

1. 先定义最基础的单词数据模型

// 闪卡数据模型，可按需扩展音标、例句等字段
class FlashCard {
  final String word;
  final String translation;
  FlashCard({required this.word, required this.translation});
}

2. 在页面State里初始化队列与状态变量

class _FlashCardStudyPageState extends State<FlashCardStudyPage> {
  // 初始待学单词队列，替换成你自己的词表加载逻辑即可
  late List<FlashCard> _initialQueue;
  // 存储待循环复习的不认识单词
  final List<FlashCard> _reviewQueue = [];
  // 当前展示的卡片
  FlashCard? _currentCard;
  // 标记当前卡片来源，方便处理点击逻辑
  bool _isFromReview = false;

  @override
  void initState() {
    super.initState();
    // 初始化词表示例，实际开发可替换为本地词表读取、接口拉取逻辑
    _initialQueue = [
      FlashCard(word: "ambiguous", translation: "模糊的，模棱两可的"),
      FlashCard(word: "conscientious", translation: "认真负责的，尽责的"),
      FlashCard(word: "diligent", translation: "勤奋的，刻苦的"),
    ];
    // 页面初始化时加载第一张卡片
    _loadNextCard();
  }
}

3. 写核心的切卡方法，统一处理取卡逻辑

void _loadNextCard() {
  setState(() {
    // 优先加载复习队列的单词
    if (_reviewQueue.isNotEmpty) {
      _currentCard = _reviewQueue.removeAt(0);
      _isFromReview = true;
      return;
    }
    // 复习队列为空时加载新单词
    if (_initialQueue.isNotEmpty) {
      _currentCard = _initialQueue.removeAt(0);
      _isFromReview = false;
      return;
    }
    // 两个队列都空，学习完成
    _currentCard = null;
  });
}

4. 对接你已经写好的两个按钮的点击事件

// 「我认识」按钮点击逻辑
void _handleKnowTap() {
  // 取卡时已经把当前卡从对应队列头部移除，点认识就不用再放回队列，直接加载下一张
  _loadNextCard();
}

// 「我不认识」按钮点击逻辑
void _handleUnKnowTap() {
  // 把当前卡加到复习队列末尾，等待循环出现
  if (_currentCard != null) {
    _reviewQueue.add(_currentCard!);
  }
  _loadNextCard();
}

5. UI部分你之前写的翻卡效果、卡片布局不用改，只需要把_currentCard的内容传给卡片组件，两个按钮分别绑定上面两个点击方法就行，学习完成的状态判断_currentCard == null时展示完成页即可。

新手避坑提示 #

• 取卡的时候一定要把卡片从对应队列的头部移除，点「我不认识」再往复习队列尾部追加，自然就形成循环效果，不会出现卡片重复弹出、漏卡的问题
• 如果后续要升级规则，比如「连续答对2次才算掌握」，只需要给FlashCard类加个correctCount字段，点认识时计数+1，达到阈值再不放回复习队列即可，核心流转逻辑不用改
• 如果需要保存学习进度，每次队列变动后把两个队列的内容序列化成JSON存本地（可用shared_preferences或sqlite），下次启动时还原队列即可，不会丢失进度
• 不要一开始就嵌套太多判断逻辑，先按上面的最简逻辑跑通，验证循环效果符合预期后再加其他功能

内容的提问来源于stack exchange，提问作者Beneficial Knowledge