Flutter ScreenUtil 在横屏模式下字体大小溢出的解决方案

问题现象

在使用 Flutter ScreenUtil 进行屏幕适配时，开发者反馈在横屏模式下会出现字体大小异常增大导致内容溢出的问题。该问题在 Flutter 3.19.5 版本中仍然存在。

问题根源分析

经过技术分析，这个问题源于 Flutter ScreenUtil 3.9.0 版本中 fontSizeResolver 的计算方式。在横屏模式下，屏幕的宽度变得非常大，导致计算出的缩放因子超过2倍，从而使字体异常放大。

具体来说：

1. 在竖屏模式下，屏幕宽度较小，计算出的缩放因子合理
2. 当切换到横屏模式时，屏幕宽度显著增加
3. 当前的 fontSizeResolver 仅基于宽度计算缩放因子
4. 导致在横屏模式下字体被过度放大

解决方案

针对这个问题，开发者提出了一个有效的解决方案：重写 fontSizeResolver 的计算逻辑。具体实现思路是：

在横屏模式下，改为使用屏幕高度除以设计稿宽度来计算缩放因子，而不是直接使用屏幕宽度。这样可以避免因横屏宽度过大导致的字体过度放大问题。

示例实现代码（概念性描述）：

ScreenUtil.init(
  context,
  designSize: Size(360, 690),
  fontSizeResolver: (screenSize, designSize) {
    final isLandscape = screenSize.width > screenSize.height;
    return isLandscape 
      ? screenSize.height / designSize.width
      : screenSize.width / designSize.width;
  }
);

实际效果验证

多位开发者反馈，采用这种解决方案后，横屏模式下的字体大小显示正常，不再出现内容溢出的情况。这种方法既保持了竖屏模式下的正常显示效果，又解决了横屏模式下的适配问题。

最佳实践建议

1. 对于需要同时支持横竖屏的应用，建议始终使用自定义的 fontSizeResolver
2. 在设计稿尺寸选择上，建议使用最常见的竖屏尺寸作为基准
3. 在横屏模式下，考虑使用高度作为计算基准更为合理
4. 可以进一步扩展此方案，为平板等大屏设备提供更精细的适配策略

总结

Flutter ScreenUtil 是一个强大的屏幕适配工具，但在处理横竖屏切换时需要注意特殊的计算逻辑。通过自定义 fontSizeResolver，开发者可以灵活控制不同屏幕方向下的字体缩放行为，确保应用在各种设备上都能呈现良好的视觉效果。这个解决方案不仅简单有效，而且不会影响原有的竖屏适配逻辑，是处理类似问题的理想选择。