Flutter Web使用GetX路由跳转时页面标题在新旧页间反复切换问题

问题根因 #

• 使用Get.toNamed跳转时，仅将新页面压入现有路由栈，上一级页面不会被销毁。如果两个页面的生命周期回调（如build、initState）中都调用了标题修改逻辑，路由动画过程中前后两个页面会交替触发标题修改调用，就会出现标题来回跳动的现象。
• Get.OffAllNamed会清空当前所有路由栈后再压入新页面，不存在旧页面触发标题修改的逻辑，因此不会出现该问题。

解决方案 #

方案1：增加路由匹配校验

调用setPageTitle前通过Get.routing.current判断当前激活路由是否为当前页面对应路由，匹配成功再执行标题修改：

void setPageTitle(String title, BuildContext context, String currentPageRoute) {
  // 仅当前路由与页面路由匹配时修改标题
  if (Get.routing.current != currentPageRoute) return;
  SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
    label: title,
    primaryColor: Theme.of(context).primaryColor.value,
  ));
}

调用时传入当前页面注册的路由名即可。

方案2：调整标题修改的触发时机

将标题修改逻辑放到帧渲染结束的回调中执行，避免路由动画过程中重复触发：

// 在页面的initState或build方法中调用
WidgetsBinding.instance.addPostFrameCallback((_) {
  setPageTitle("当前页标题", context);
});

方案3：使用系统/框架自带的标题管理能力

• 如果页面有AppBar组件，直接设置AppBar的title属性即可，系统会自动同步到应用切换器，无需手动调用SystemChrome相关接口。
• 也可以在路由定义的GetPage中统一配置每个路由的标题，由GetX框架自动处理标题设置，避免多页面逻辑冲突：

GetPage(
  name: Routes.home,
  page: () => HomePage(),
  title: "首页", // 直接配置路由对应标题
)

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