Flutter Camera Preview无法随手机横竖屏旋转问题求助

嘿，我之前折腾Camera Plugin的时候也踩过这个横屏预览的坑——照片方向正常但预览死活不转，还没法充满屏幕，试过Transform.rotate确实容易出黑边或者拉伸的问题，给你几个亲测有效的解决办法：

1. 监听设备方向，动态调整相机预览配置 #

首先要让相机感知设备的旋转状态，你可以在页面的State类里混入WidgetsBindingObserver，监听方向变化后更新相机的预览方向和尺寸：

class _CameraScreenState extends State<CameraScreen> with WidgetsBindingObserver {
  late CameraController _controller;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 初始化相机，记得设置初始方向
    _initCamera();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _controller.dispose();
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 设备方向变化时，更新相机预览配置
    _updateCameraOrientation();
  }

  Future<void> _updateCameraOrientation() async {
    final orientation = MediaQuery.of(context).orientation;
    // 根据设备方向设置相机的预览方向
    final desiredOrientation = orientation == Orientation.landscape
        ? DeviceOrientation.landscapeLeft
        : DeviceOrientation.portraitUp;
    await _controller.setPreferredOrientation(desiredOrientation);
    if (mounted) setState(() {});
  }
}

2. 基于预览尺寸和屏幕方向适配AspectRatio #

不要直接用Transform.rotate硬转，而是利用相机的previewSize和当前屏幕方向来计算正确的宽高比，让CameraPreview自然适配屏幕：

Widget _buildCameraPreview() {
  if (!_controller.value.isInitialized) {
    return const Center(child: CircularProgressIndicator());
  }
  final previewSize = _controller.value.previewSize!;
  final orientation = MediaQuery.of(context).orientation;
  // 横屏时交换宽高比，保证预览充满屏幕
  final aspectRatio = orientation == Orientation.landscape
      ? previewSize.height / previewSize.width
      : previewSize.width / previewSize.height;

  return AspectRatio(
    aspectRatio: aspectRatio,
    child: CameraPreview(_controller),
  );
}

3. 额外注意：相机初始化时的方向设置 #

在初始化相机控制器的时候，记得指定preferredCameraOrientation，避免初始状态就出现方向偏差：

Future<void> _initCamera() async {
  final cameras = await availableCameras();
  final selectedCamera = cameras.first;
  _controller = CameraController(
    selectedCamera,
    ResolutionPreset.high,
    preferredCameraOrientation: DeviceOrientation.portraitUp, // 初始方向
  );
  await _controller.initialize();
  if (mounted) setState(() {});
}

这样调整后，横屏时预览应该就能自动旋转并充满屏幕了。核心是让相机本身适配设备方向，再通过AspectRatio保证预览画面和屏幕尺寸匹配，而不是强行旋转组件导致适配问题。

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