使用Mobx的Flutter应用跳转新页面后首页仍刷新如何解决？

核心原因 #

你遇到的问题高频触发场景是：第二个页面唤起输入法（输入框操作）时，全局MediaQuery参数变化触发首页重建，加上市面上很多开发者习惯把接口请求写在build方法里，或者Mobx全局状态监听范围过大导致的。

修复步骤 #

• 调整接口请求的调用位置 #

  绝对不要把首页的初始化接口请求写在build方法中，所有仅需执行一次的初始化逻辑统一放在initState生命周期中执行，避免每次页面重建就重复调用接口。
  示例代码：

  class _HomePageState extends State<HomePage> {
    @override
    void initState() {
      super.initState();
      // 初始化接口仅在这里调用一次
      fetchHomeListApi();
      fetchUserInfoApi();
    }
  
    @override
    Widget build(BuildContext context) {
      // 此处禁止调用任何接口请求逻辑
      return const Scaffold(body: ...);
    }
  }
  

• 缩小Observer监听范围&拆分Mobx状态 #

  1. 不要将整个首页都包裹在Observer组件内，仅对需要响应状态变化的局部组件添加Observer包裹即可
  2. 拆分独立的Mobx Store模块，首页和DayBookScreen的业务状态分开管理，避免第二个页面操作修改了首页依赖的被观察属性，触发首页不必要的重建

• 消除全局上下文依赖带来的重建 #

  第二个页面操作输入框时会唤起输入法，此时系统MediaQuery的键盘高度、页面边距参数会发生变化，如果首页build方法中直接使用MediaQuery.of(context)、Theme.of(context)这类全局依赖，就会被触发重建。可以替换为以下方式获取全局参数，脱离上下文依赖：

  // 替代MediaQuery.of(context)，不会触发上下文关联的重建
  final mediaQuery = MediaQueryData.fromWindow(WidgetsBinding.instance.window);
  

• 组件优化 #

  给首页的静态组件添加const修饰，自定义业务组件建议继承Equatable重写相等判断逻辑，减少框架层面的不必要重建。

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