Flutter安卓模拟器切换屏幕方向后UI异常需热重载/重启如何解决

该问题本质是屏幕方向切换时，你的Flutter应用没有触发使用最新屏幕参数的UI重建，核心原因通常分为三类：

• 安卓原生层配置错误，方向变化事件没有正确传递到Flutter层，导致Flutter不知道屏幕尺寸发生了变更
• 响应式逻辑写法错误，屏幕尺寸相关的计算被提前缓存，没有在每次UI构建时使用最新参数
• 第三方响应式适配库初始化配置错误，没有监听尺寸变化自动更新适配参数

1. 修正安卓原生配置 #

打开android/app/src/main/AndroidManifest.xml，找到activity标签，添加configChanges属性，完整参考配置如下：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:configChanges="orientation|screenSize|smallestScreenSize|layoutDirection|screenLayout"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme">
    <!-- 其余intent-filter等配置保持不变 -->
</activity>

添加该配置后，屏幕方向、尺寸变化时安卓不会销毁重建Activity，会直接将变化事件通知到Flutter层触发UI重建。

2. 修正响应式逻辑写法 #

所有和屏幕尺寸、适配相关的计算，必须放在Widget的build方法内部实时获取，禁止在initState等生命周期中一次性计算后缓存为全局变量、State属性使用：

// 错误写法
double? screenWidth;
@override
void initState() {
  super.initState();
  screenWidth = MediaQuery.of(context).size.width; // 仅在初始化时获取一次，方向变化后不会更新
}

// 正确写法
@override
Widget build(BuildContext context) {
  // 每次build都重新获取最新的屏幕参数
  final screenWidth = MediaQuery.of(context).size.width;
  final screenHeight = MediaQuery.of(context).size.height;
  // 基于最新参数计算间距、字体大小、组件尺寸
  return Scaffold(
    // UI代码
  );
}

3. 主动监听屏幕尺寸变化（可选，适用于全局适配场景） #

如果需要在全局状态、自定义类中监听尺寸变化，可以通过WidgetsBindingObserver监听系统尺寸变化回调，主动触发更新：

class HomePageState extends State<HomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    // 注册监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 屏幕尺寸变化时触发当前页面重绘，全局场景可以触发全局状态更新
    if (mounted) setState(() {});
  }

  @override
  void dispose() {
    // 移除监听避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 响应式计算逻辑
  }
}

4. 检查第三方适配库配置 #

如果你使用了flutter_screenutil等第三方适配库，确保初始化配置正确，开启了尺寸变化监听：

MaterialApp(
  home: const HomePage(),
  // 在builder中正确初始化适配库
  builder: (context, child) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // 替换为你的设计稿尺寸
      minTextAdapt: true,
      splitScreenMode: true, // 开启分屏、方向变化时自动重新适配
      builder: (context, child) => child!,
      child: child,
    );
  },
);

在页面的build方法中添加打印日志：print(MediaQuery.of(context).size)，切换屏幕方向后观察日志：

• 如果没有新日志输出：优先排查安卓configChanges配置是否正确
• 如果有新日志输出但UI没有适配：优先排查你的响应式逻辑是否缓存了旧的尺寸参数

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