Flutter中Future.delayed结合Widget使用的异常行为排查

问题描述 #

采用类似PageController的结构管理Widget切换，预期ActualGame Widget显示49秒后跳转到AfterGame Widget，跳转生效但存在异常：切换完成后navigateToNextScreenAfterNSeconds方法被再次调用，导致无论当前显示哪个Widget，49秒后都会再次跳转到AfterGame Widget，希望仅在打开ActualGame时调用一次该方法。

问题原因 #

1. Build方法重复执行：Flutter中Widget的build方法会在依赖状态更新（如watch<MyAppState>监听的状态变化）、父Widget重建、屏幕旋转等场景下多次触发。将navigateToNextScreenAfterNSeconds放在build中，每次build都会创建新的延迟任务，旧任务不会自动取消，导致多个任务同时存在。
2. 无任务生命周期管理：未在Widget销毁时取消未完成的延迟任务，也未标记任务是否已启动，导致重复触发跳转逻辑。

解决方案 #

将延迟任务的启动移至initState（仅初始化时执行一次），使用Timer替代Future.delayed以便管理任务生命周期，并在dispose中取消任务。

修改后的ActualGame代码 #

class ActualGame extends StatefulWidget {
  const ActualGame({super.key});

  @override
  State<ActualGame> createState() => _ActualGameState();
}

class _ActualGameState extends State<ActualGame> {
  Timer? _countdownTimer;

  @override
  void initState() {
    super.initState();
    // 仅在Widget初始化时启动一次倒计时
    navigateToNextScreenAfterNSeconds(49);
  }

  @override
  void dispose() {
    // 页面销毁时取消定时器，避免无效操作和内存泄漏
    _countdownTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return GestureDetector(
      onTap: appState.nextQuestion,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Scaffold(
          body: Center(
            child: Card(
              elevation: 5,
              shape: ContinuousRectangleBorder(
                  borderRadius: const BorderRadius.all(Radius.circular(12)),
                  side:
                      BorderSide(color: Theme.of(context).colorScheme.outline)),
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(
                  appState.currentQuestion,
                  style: const TextStyle(fontSize: 35),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  void navigateToNextScreenAfterNSeconds(int seconds) {
    var appState = context.read<MyAppState>(); // 仅获取实例，无需监听状态变化

    _countdownTimer = Timer(Duration(seconds: seconds), () {
      appState.updateSelectedIndex(2);
    });
  }
}

关键修改说明 #

• initState中启动任务：initState是StatefulWidget初始化阶段仅执行一次的方法，确保倒计时逻辑只触发一次。
• 使用Timer管理任务：通过Timer实例可以在Widget销毁时调用cancel()取消未完成的任务，避免跳转逻辑在页面切换后仍执行。
• dispose中取消任务：防止Widget销毁后，延迟任务试图更新状态引发潜在错误。
• 替换watch为read：在navigateToNextScreenAfterNSeconds中仅需获取MyAppState实例调用方法，无需监听状态变化，使用read更高效且避免不必要的重建。

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