使用预定义路由的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
相关产品推荐
相关产品推荐

