设置DeviceOrientation.landscapeLeft后竖屏启动UI异常求助

方案一：通过原生配置锁定启动方向（最可靠） #

直接在Android和iOS的项目配置中锁定左横屏，让应用启动时就以目标方向加载，从根源避免切换过程中的布局错乱。

Android 配置 #

打开android/app/src/main/AndroidManifest.xml，找到主Activity标签（通常为MainActivity），添加android:screenOrientation="reverseLandscape"属性：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize"
    android:screenOrientation="reverseLandscape"> <!-- 添加该行锁定左横屏 -->
    <!-- 其他原有配置 -->
</activity>

注：Android中reverseLandscape对应Flutter的DeviceOrientation.landscapeLeft，若需右横屏可替换为landscape。

iOS 配置 #

打开ios/Runner/Info.plist，找到UISupportedInterfaceOrientations数组，仅保留UIInterfaceOrientationLandscapeLeft，删除其余方向选项：

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationLandscapeLeft</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationLandscapeLeft</string>
</array>

方案二：Flutter层面优化布局适配 #

若无法修改原生配置，可通过优化Flutter布局逻辑，确保界面在方向切换时正确重建：

1. 依赖MediaQuery获取屏幕尺寸，避免固定值导致的布局错位：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: SizedBox(
        width: screenSize.width,
        height: screenSize.height,
        child: // 你的界面内容
      ),
    );
  }
}

2. 监听方向变化，强制触发界面重建：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);

  // 监听系统UI变化，强制更新界面
  WidgetsBinding.instance.addPostFrameCallback((_) {
    SystemChrome.addSystemUiVisibilityListener((_) {
      WidgetsBinding.instance.forceAppUpdate();
    });
  });

  runApp(const MaterialApp(home: MyApp()));
}

方案三：同步修改启动屏配置 #

若应用启动屏为竖屏，也可能导致启动后界面错乱，需同步调整启动屏为横屏：

• Android：修改启动屏布局文件，设置为横屏模式；
• iOS：制作横屏尺寸的启动图片，并在Info.plist中完成对应配置。

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