Flutter应用iOS及Android端拍照时强制横屏的实现方案咨询

针对拍摄摩托车、护照这类适合横屏的场景，以下是在iOS和Android端实现拍照页面强制横屏的具体步骤：

一、Flutter 核心代码控制 #

在拍照页面的生命周期中，强制设置屏幕方向，并在页面销毁后恢复默认设置，避免影响其他页面：

import 'package:flutter/services.dart';

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

  @override
  State<CameraCapturePage> createState() => _CameraCapturePageState();
}

class _CameraCapturePageState extends State<CameraCapturePage> {
  @override
  void initState() {
    super.initState();
    // 锁定屏幕为左右横屏模式
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  @override
  void dispose() {
    // 恢复系统默认的横竖屏支持
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: const Center(
        child: Text("相机预览区域", style: TextStyle(color: Colors.white)),
      ),
    );
  }
}

二、Android 端补充配置 #

如果使用系统相机或第三方相机插件，需确保AndroidManifest.xml中Activity的屏幕方向配置允许横屏：

打开android/app/src/main/AndroidManifest.xml，修改主Activity的属性：

<activity
    android:name=".MainActivity"
    android:screenOrientation="sensorLandscape"
    android:exported="true">
    <!-- 其他原有配置 -->
</activity>

sensorLandscape会允许设备根据物理方向切换左右横屏，若需固定单一横屏方向，可改为landscapeLeft或landscapeRight。

三、iOS 端补充配置 #

1. Info.plist 支持方向配置 #

打开ios/Runner/Info.plist，添加或修改支持的屏幕方向：

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

2. 相机插件方向适配 #

若使用camera插件自定义相机，初始化时可直接指定横屏方向：

final CameraController controller = CameraController(
  selectedCamera,
  ResolutionPreset.high,
  orientation: DeviceOrientation.landscapeLeft,
);

如果使用image_picker插件调用系统相机，部分版本需通过原生扩展确保横屏生效，或改用支持横屏的自定义相机实现。

四、关键注意事项 #

• 务必在页面销毁时恢复屏幕方向，否则整个应用会一直锁定在横屏模式
• 测试时覆盖不同机型（尤其是折叠屏、平板），确保相机预览和拍照结果的方向正确
• 部分第三方相机插件自带方向控制逻辑，需优先遵循插件文档配置

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