Flutter设备方向控制异常：旋转至横屏后自动切回竖屏及跨页面方向冲突排查

这个问题其实是Flutter在iOS和Android上处理屏幕方向的机制差异，加上页面栈中方向设置的残留冲突导致的，我帮你拆解一下原因和解决办法：

核心原因 #

1. iOS的全局方向状态残留：iOS的屏幕方向是全局控制的，如果你之前的页面强制设置了竖屏，跳转到新页面后，即使你设置了允许所有方向，系统可能还会保留之前的方向锁，尤其是当SystemChrome.setPreferredOrientations的执行时机不对时，很容易被之前的设置覆盖。
2. build方法中设置方向的错误：build会被Flutter频繁调用（比如布局重建、状态变化时），每次调用都会重新设置方向，这会导致方向设置反复冲突，甚至出现"自动切回竖屏"的诡异现象。
3. Android配置缺失：Android端如果Activity没有配置足够的旋转相关参数，会导致旋转时Activity重建，Flutter的方向设置无法生效，表现为完全不响应旋转。

分步解决方案 #

1. 把方向设置移到正确的生命周期方法 #

绝对不要在build里设置方向，改用页面的initState和dispose方法，确保进入页面时设置目标方向，离开时恢复上一个页面的方向：

class RotatablePage extends StatefulWidget {
  @override
  _RotatablePageState createState() => _RotatablePageState();
}

class _RotatablePageState extends State<RotatablePage> {
  @override
  void initState() {
    super.initState();
    // 进入页面时，设置允许所有方向
    WidgetsBinding.instance.addPostFrameCallback((_) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    });
  }

  @override
  void dispose() {
    // 离开页面时，恢复为强制竖屏（匹配之前页面的设置）
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
    return Scaffold(
      body: isLandscape 
          ? Row(children: [/* 横屏布局 */]) 
          : Column(children: [/* 竖屏布局 */]),
    );
  }
}

这里用addPostFrameCallback是为了确保页面渲染完成后再设置方向，避免iOS系统没来得及响应。

2. Android端补充配置 #

打开android/app/src/main/AndroidManifest.xml，给MainActivity添加configChanges参数，确保旋转时不重建Activity：

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|screenSize|smallestScreenSize|keyboardHidden"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">

3. 用路由监听统一管理方向（进阶方案） #

如果你的App有很多页面需要区分方向，推荐用RouteObserver来全局监听路由切换，自动设置对应页面的方向，避免每个页面重复写逻辑：

class OrientationRouteObserver extends RouteObserver<PageRoute<dynamic>> {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    // 根据页面名称设置方向
    if (route.settings.name == '/rotatable-page') {
      _setAllOrientations();
    } else {
      _setPortraitOnly();
    }
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    // 返回上一页时，恢复上一页的方向
    if (previousRoute?.settings.name == '/rotatable-page') {
      _setAllOrientations();
    } else {
      _setPortraitOnly();
    }
  }

  void _setAllOrientations() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  void _setPortraitOnly() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
  }
}

然后在MaterialApp中注册这个Observer：

MaterialApp(
  navigatorObservers: [OrientationRouteObserver()],
  routes: {
    '/': (context) => PortraitOnlyHomePage(),
    '/rotatable-page': (context) => RotatablePage(),
  },
);

验证效果 #

按这个方案调整后：

• iOS端：从强制竖屏页面跳转到可旋转页面后，旋转设备会正常切换布局，不会自动切回竖屏；返回时会恢复竖屏。
• Android端：旋转设备会立即响应布局切换，不会出现无反应的情况。

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