Flutter ScreenUtil 初始化导致页面构建两次的问题解析

问题现象

在使用 Flutter ScreenUtil 库进行屏幕适配时，开发者反馈了一个常见问题：当使用 ScreenUtilInit 进行全局初始化时，页面构建（build）方法会被调用两次，导致初始路由页面被重复创建。具体表现为初始路由页面（如示例中的 LunarLoadingView）的 build 方法被执行两次，进而可能引发不必要的性能开销和逻辑重复执行。

问题原因分析

经过对问题代码的分析，这种现象主要源于 Flutter 框架和 ScreenUtil 库的协同工作机制：

1. ScreenUtilInit 的工作机制：ScreenUtilInit 是一个特殊的 Widget，它负责初始化屏幕适配所需的参数，并在 widget 树中提供这些配置。当它首次构建时，会触发一次子 widget 的构建。

2. MaterialApp 的构建流程：MaterialApp 在初始化时会先构建一次，然后由于 ScreenUtilInit 的初始化完成，可能触发 widget 树的更新，导致二次构建。

3. Builder 函数的重复调用：示例代码中在 MaterialApp 的 builder 参数中设置了媒体查询和加载指示器，这个 builder 可能在初始化过程中被多次调用。

解决方案

针对这个问题，有以下几种解决方案：

方案一：使用 child 参数替代 builder

ScreenUtilInit 的设计初衷是通过 child 参数来构建主要界面，builder 参数仅用于高级用法。将 MaterialApp 直接作为 child 参数传递可以减少不必要的重建：

return ScreenUtilInit(
  designSize: const Size(750, 1624),
  child: MaterialApp(
    // 应用配置...
  ),
);

方案二：使用 StatefulWidget 控制初始化逻辑

对于必须在页面初始化时执行的逻辑，应该放在 StatefulWidget 的 initState 方法中，这样可以确保逻辑只执行一次：

class LunarLoadingView extends StatefulWidget {
  const LunarLoadingView({super.key});

  @override
  State<LunarLoadingView> createState() => _LunarLoadingViewState();
}

class _LunarLoadingViewState extends State<LunarLoadingView> {
  @override
  void initState() {
    super.initState();
    // 初始化逻辑放在这里，确保只执行一次
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

方案三：优化 MaterialApp 的构建方式

将 MaterialApp 的 builder 逻辑简化，避免在其中进行复杂的构建操作，可以减少重建的影响：

builder: (context, child) {
  return MediaQuery(
    data: MediaQuery.of(context).copyWith(textScaler: const TextScaler.linear(1.0)),
    child: child!,
  );
},

最佳实践建议

1. 区分初始化逻辑和构建逻辑：将只需要执行一次的逻辑放在 initState 中，构建相关的逻辑放在 build 方法中。

2. 合理使用 ScreenUtilInit：优先使用 child 参数传递主要界面，仅在需要动态响应屏幕尺寸变化时使用 builder。

3. 性能监控：在开发过程中使用 Flutter 的性能工具监控 widget 的重建次数，及时发现并解决不必要的重建问题。

4. 理解 Flutter 框架行为：Flutter 框架在某些情况下会故意触发 widget 重建以实现响应式设计，这是正常现象，关键是要确保业务逻辑能够适应这种特性。

总结

Flutter ScreenUtil 库作为屏幕适配的解决方案，在实际使用中可能会遇到页面重复构建的问题。通过理解其工作原理和 Flutter 框架的构建机制，开发者可以采取适当的优化措施来避免不必要的性能开销。关键在于合理组织代码结构，区分一次性初始化逻辑和可重复执行的构建逻辑，从而确保应用既能正确适配各种屏幕，又能保持高效的运行性能。