Question

我是Dart / Flutter的新手并且目前正在使用Flutter Camera Plugin但是当手机转为横向模式时，我遇到了CameraPreview的问题。图像保持垂直状态，不会在手机上旋转90度。

我尝试了无数的东西，包括Transform.rotate（），但我似乎无法将图像同时用于两者，填满屏幕并旋转90度。

手机侧身拍摄的照片在查看时仍以正确方向保存，但使用_cameraPreviewWidget。

Normal

Landscape

Answer 1

当您使用相机旋转手机时，预览将保持垂直，但是当您查看图像时，它将处于横向状态，尝试使用默认的相机应用程序，它将是相同的

当手机旋转时，显然可以旋转相机预览顶部的UI

Answer 2

软件包调用camera_camera https://pub.dev/packages/camera_camera
具有出色的工作并提供了出色的功能，您可以参考他的源代码或直接分支。

关于轮换问题，请使用此软件包https://pub.dev/packages/native_device_orientation
像这样包裹身体

return Scaffold(
      body: NativeDeviceOrientationReader(builder: (context) {
        NativeDeviceOrientation orientation =
            NativeDeviceOrientationReader.orientation(context);

您可以在以下位置引用完整的代码 https://github.com/marslord/camera/blob/master/lib/cam.dart，这不是camera_camera软件包，作者使用RotateBox

return RotatedBox(
          quarterTurns: turns,
          child: Transform.scale(
            scale: 1 / controller.value.aspectRatio,
            child: Center(
              child: AspectRatio(
                aspectRatio: controller.value.aspectRatio,
                child: CameraPreview(controller),
              ),
            ),
          ),
        );

camera_camera软件包在第76行使用此

return NativeDeviceOrientationReader(
  useSensor: true,
  builder: (context) {
    NativeDeviceOrientation orientation =
        NativeDeviceOrientationReader.orientation(context);

关于适合屏幕的问题
camera_camera包使用以下代码执行此操作，完整代码位于https://github.com/gabuldev/camera_camera/blob/master/lib/page/camera.dart

    return widget.mode ==
              CameraMode.fullscreen
          ? OverflowBox(
              maxHeight: size.height,
              maxWidth: size.height *
                  previewRatio,
              child: CameraPreview(
                  bloc.controllCamera),
            )
          : AspectRatio(
              aspectRatio: bloc
                  .controllCamera
                  .value
                  .aspectRatio,
              child: CameraPreview(
                  bloc.controllCamera),
            );

camera_camera软件包的执行结果可以在他的github

中找到

执行https://github.com/marslord/camera的结果

都可以在真实设备上检查并正常运行

官方相机插件示例旋转图像可以与Native_device_orientation结合使用和RotateBox，您可以引用https://github.com/marslord/camera/blob/master/lib/cam.dart
但官方的相机插件示例适合屏幕问题将需要修改布局代码

我建议使用camera_camera的方法，堆栈CameraPreview和Button。它看起来更像Native Camera App，并且易于维护横向模式

官方相机插件示例结合了Native_device_orientation和RotateBox旋转图像代码段

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Camera example'),
      ),
      body: NativeDeviceOrientationReader(builder: (context) {

        NativeDeviceOrientation orientation =
        NativeDeviceOrientationReader.orientation(context);

        int turns;
        switch (orientation) {
          case NativeDeviceOrientation.landscapeLeft:
            turns = -1;
            break;
          case NativeDeviceOrientation.landscapeRight:
            turns = 1;
            break;
          case NativeDeviceOrientation.portraitDown:
            turns = 2;
            break;
          default:
            turns = 0;
            break;
        }

        return Column(
          children: <Widget>[
            Expanded(
              child: RotatedBox(
                quarterTurns: turns,
                child: Transform.scale(
                  scale: 1 / controller.value.aspectRatio,
                  child: Container(
                    child: Padding(
                      padding: const EdgeInsets.all(1.0),
                      child: AspectRatio(
                        aspectRatio: controller.value.aspectRatio,
                        child: Center(
                          child: _cameraPreviewWidget(),
                        ),
                      ),
                    ),

Answer 3

在我的initState（）和dispose（）函数中添加 SystemChrome.setPreferredOrientations（）为我解决了此问题。

  import 'package:flutter/services.dart';

  ...

  @override
  void initState() {
    super.initState();

    SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
      ]);    
  }

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

颤动摄像头预览不能以电话方向旋转

3 个答案: