Flutter页面切换状态异常：第二页二次加载状态错误排查

根据描述的症状：二次加载「Check Inventory」页面时，仅Task1按钮启用，但红点错误显示在禁用的Task5上；点击Task1后所有按钮启用且红点消失，核心问题是initializeSecondPage函数中状态初始化逻辑不匹配，导致当前任务索引（红点位置）与按钮启用状态不同步。

核心错误点 #

1. 当前任务索引计算错误：从SharedPreferences读取状态后，未正确定位到第一个未完成的任务，错误将currentTaskIndex设置为最后一个任务（索引4），导致红点错位。
2. 按钮启用状态逻辑不一致：按钮启用规则未与当前任务索引绑定，仅硬编码启用Task1，而非根据任务完成顺序动态生成。
3. 点击事件处理逻辑错误：点击Task1时错误地批量启用所有按钮，而非按顺序激活下一个任务。

修复后的代码实现 #

假设你的Provider状态类为InventoryCheckProvider，以下是修复后的关键函数：

1. 状态类核心变量定义 #

class InventoryCheckProvider extends ChangeNotifier {
  // 5个任务的完成状态，索引0对应Task1，索引4对应Task5
  List<bool> _taskCompleted = List.filled(5, false);
  // 当前应处理的任务索引（红点显示位置）
  int _currentTaskIndex = 0;
  // 每个按钮的启用状态
  List<bool> _buttonsEnabled = List.filled(5, false);
  late SharedPreferences _prefs;

  // getter方法暴露状态
  List<bool> get taskCompleted => _taskCompleted;
  int get currentTaskIndex => _currentTaskIndex;
  List<bool> get buttonsEnabled => _buttonsEnabled;

2. 修复后的initializeSecondPage函数 #

Future<void> initializeSecondPage() async {
    _prefs = await SharedPreferences.getInstance();
    
    // 从SharedPreferences读取每个任务的完成状态
    for (int i = 0; i < 5; i++) {
      _taskCompleted[i] = _prefs.getBool('task_${i+1}_completed') ?? false;
    }

    // 计算当前任务索引：找到第一个未完成的任务
    final firstUncompletedIndex = _taskCompleted.indexWhere((completed) => !completed);
    // 如果所有任务都完成，默认定位到Task5（索引4）
    _currentTaskIndex = firstUncompletedIndex == -1 ? 4 : firstUncompletedIndex;

    // 动态生成按钮启用状态：按顺序激活，仅当前任务及之前已完成的任务可点击
    _buttonsEnabled = List.generate(5, (index) {
      return index <= _currentTaskIndex;
    });

    notifyListeners(); // 通知UI刷新状态
  }

3. 修复后的任务点击处理函数 #

Future<void> onTaskClicked(int taskIndex) async {
    // 标记当前任务为完成
    _taskCompleted[taskIndex] = true;
    await _prefs.setBool('task_${taskIndex+1}_completed', true);

    // 更新当前任务索引：找到下一个未完成的任务
    final nextUncompletedIndex = _taskCompleted.indexWhere((completed) => !completed);
    _currentTaskIndex = nextUncompletedIndex == -1 ? 4 : nextUncompletedIndex;

    // 更新按钮启用状态：激活下一个任务
    _buttonsEnabled = List.generate(5, (index) {
      return index <= _currentTaskIndex;
    });

    notifyListeners();
  }

验证步骤 #

1. 完成Task1后退出应用，重新进入「Check Inventory」页面：此时Task1标记为完成，Task2启用，红点显示在Task2位置。
2. 完成所有任务后退出，重新进入：所有任务标记为完成，红点显示在Task5，返回按钮正常显示。
3. 仅完成Task3后退出，重新进入：Task1-3可点击，Task4-5禁用，红点显示在Task3位置。

内容的提问来源于stack exchange，提问作者Placido Penitente