You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用预定义路由的Navigator时出现屏幕闪烁问题求助

问题原因分析及解决办法

核心问题1:误用周期性Timer

你当前用的Timer.periodic是周期性定时器,会每隔2秒重复执行一次导航逻辑。第一次跳转后,路由栈里已经没有初始的/页面了,后续重复触发的导航操作会和现有路由栈冲突,导致页面反复尝试跳转、重建,直接引发屏幕闪烁。而你之前的代码虽然也用了Timer.periodic,但pushAndRemoveUntil的移除条件是(route)=>false(移除所有旧路由),第一次跳转后路由栈只剩目标页面,后续的导航操作因为没有可移除的路由,实际不会触发页面变化,但这本身也是错误的用法——你只需要一次跳转,不是周期性跳转。

核心问题2:多余的setState调用

导航操作完全不需要调用setState,setState的作用是触发当前组件的状态更新与UI重建,而跳转路由和BolWelcome的状态无关。这个多余的setState会强制BolWelcome组件反复build,加重了屏幕闪烁的现象。

路由移除条件的差异(次要原因)

你当前用的ModalRoute.withName('/')作为移除条件,意思是移除路由栈中直到/的所有路由,但第一次跳转后/已经被移除,后续周期性触发的导航会因为找不到匹配的路由,产生无效的路由操作,进一步加剧闪烁。而之前的(Route<dynamic> route) => false会直接移除所有旧路由,跳转后路由栈更干净,即便定时器重复触发,也不会有明显的页面波动。


修复后的代码

把周期性定时器换成一次性定时器,去掉多余的setState,并保持路由移除逻辑的一致性:

void initState() {
  super.initState();
  // 使用一次性Timer,仅执行一次跳转
  Timer(const Duration(seconds: 2), () {
    Navigator.pushNamedAndRemoveUntil(
      context,
      '/authentication',
      (route) => false, // 移除所有旧路由,和之前逻辑一致
    );
  });
}

内容的提问来源于stack exchange,提问作者Sumchans

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 08:27:52