Flutter切换页面时正确Dispose组件并保留AppBar返回按钮的方案

问题场景 #

• 首页存在一个通过Timer每隔n秒获取相机预览图的Widget，Timer在dispose()方法中销毁
• 使用push()跳转到其他页面时，首页Widget未被销毁，Timer仍在后台持续运行并获取图像
• 原依赖deactivate()方法暂停Timer的方案，在2020年Flutter版本升级后失效

可行解决方案 #

方案1：pushReplacement() + 自定义返回按钮 + WillPopScope #

• 用pushReplacement()替代push()跳转页面，此时首页Widget会被销毁，dispose()触发后Timer停止运行
• 弊端：页面历史栈被替换，需要自行实现AppBar的返回按钮逻辑
• 补充处理：将目标页面包裹在WillPopScope中，手动拦截Android物理返回事件，避免直接关闭应用

方案2：监听页面可见性控制Timer启停 #

这是更贴合常规导航逻辑的方案，无需修改跳转方式：

• 让Widget混入WidgetsBindingObserver，在initState()中注册监听：WidgetsBinding.instance.addObserver(this)
• 重写didChangeAppLifecycleState方法：当应用状态变为AppLifecycleState.paused时取消Timer，恢复为AppLifecycleState.resumed时重新启动Timer
• 若需要更精准的页面级可见性监听，可使用第三方包（如visibility_detector），当Widget完全不可见时暂停Timer，可见时恢复
• 优势：保留正常的页面历史栈，无需自定义返回按钮，物理返回键逻辑不受影响

总结 #

如果希望保持标准的导航体验，优先选择监听页面可见性的方案；若因业务需求必须使用pushReplacement()，记得配合WillPopScope处理物理返回键问题。

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