如何在新标签页打开Flutter Web应用时触发initState方法？

问题原因 #

Chrome浏览器打开同一localhost地址的Flutter Web应用时，会复用已缓存的资源和Flutter运行时上下文，导致新标签页未重新初始化Widget实例，因此initState与build方法都不会触发。

解决方案 #

• 强制禁用浏览器缓存
  打开Chrome开发者工具（快捷键F12），切换到「Network」面板，勾选「Disable cache」选项后刷新新标签页。这会强制浏览器重新加载所有资源，触发Flutter应用的完整初始化流程，initState方法将正常执行。

• 添加随机URL参数
  打开新标签页时，给URL追加随机参数，例如localhost:50544?t=${DateTime.now().millisecondsSinceEpoch}。浏览器会将带随机参数的URL判定为新请求，不会复用缓存，从而重新初始化应用并触发initState。

• 修改Flutter启动逻辑
  在main函数中添加页面加载监听，确保每次标签页打开都重新初始化应用：

  import 'package:flutter/material.dart';
  import 'dart:html' as html;
  
  void main() {
    // 监听页面加载事件，保证新标签页打开时重新初始化
    html.window.addEventListener('load', (event) {
      runApp(const MyApp());
    });
    // 首次加载直接执行初始化
    runApp(const MyApp());
  }
  
  // 其余代码保持不变
  

  注：dart:html是Flutter Web环境自带的库，无需额外添加依赖。

验证方式 #

修改后打开新标签页，观察_counter是否从1开始计数（对应initState中的自增逻辑），或通过断点确认initState与build方法是否被触发。

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