在 Flutter 中禁用旋转的情况下拍摄横向和纵向相机照片

Question

我想构建一个可以拍摄横向和纵向照片的屏幕。我的应用程序仅通过在 main 中调用以下命令以纵向模式运行：

等待 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

由于我的屏幕不再旋转，即使我将手机倾斜到一边，图像也始终以纵向拍摄。这是一个小示例项目，您可以清楚地看到它：

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:flutter/services.dart';

List<CameraDescription> cameras = [];

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  cameras = await availableCameras();
  runApp(CameraApp());
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  CameraController? controller;
  bool takingPicture = false;
  XFile? selectedImage;

  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.max);
    controller!.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller!.value.isInitialized) {
      return Container();
    }
    return MaterialApp(
      home: Stack(
        fit: StackFit.expand,
        children: [
          RotatedBox(
            quarterTurns: 1 - controller!.description.sensorOrientation ~/ 90,
            child: CameraPreview(controller!),
          ),
          CameraPreview(controller!),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
              onPressed: () {
                if (!takingPicture) {
                  takingPicture = true;
                  controller!.takePicture().then(
                    (value) {
                      selectedImage = value;
                      setState(() {});
                      takingPicture = false;
                    },
                  );
                }
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: selectedImage != null
                ? Container(
                    height: 100,
                    width: 200,
                    child: Image.file(
                      File(selectedImage!.path),
                    ),
                  )
                : Container(),
          ),
        ],
      ),
    );
  }
}

旋转手机拍照时，照片也应该以风景模式出现，但事实并非如此。如何在不取出 setPreferredOrientations 的情况下解决此问题？

Android 和 iOS 上的普通移动应用程序也可以做到这一点。

Answer 1

我要做的就是在进入屏幕时消除约束并在进入时重新应用它。

这是根据您的代码改编的示例，具有 2 个屏幕：

• 无法旋转的欢迎屏幕
• 相机屏幕可以旋转

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:flutter/services.dart';

List<CameraDescription> cameras = [];

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  cameras = await availableCameras();
  runApp(MaterialApp(home: WelcomeScreen()));
}

class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Welcome! Try rotating the screen, you won\'t be able to!'),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () => Navigator.of(context).pushReplacement(
                MaterialPageRoute(builder: (_) => CameraApp()),
              ),
              child: Text('Press me to go to the camera'),
            ),
          ],
        ),
      ),
    );
  }
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  CameraController? controller;
  bool takingPicture = false;
  XFile? selectedImage;

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

    // Remove the constraint when entering, this is ok
    // not to away since the app is in portrait mode by
    // default
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    controller = CameraController(cameras[0], ResolutionPreset.max);
    controller!.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller!.value.isInitialized) {
      return Container();
    }
    return MaterialApp(
      home: Stack(
        fit: StackFit.expand,
        children: [
          RotatedBox(
            quarterTurns: 1 - controller!.description.sensorOrientation ~/ 90,
            child: CameraPreview(controller!),
          ),
          CameraPreview(controller!),
          Align(
            alignment: Alignment.bottomCenter,
            child: ElevatedButton(
              onPressed: () async {
                // Restore the constraint before navigating away
                // DO await here to avoid any other screen in
                // landscape mode
                await SystemChrome.setPreferredOrientations([
                  DeviceOrientation.portraitUp,
                ]);

                Navigator.of(context).pushReplacement(
                  MaterialPageRoute(builder: (_) => WelcomeScreen()),
                );
              },
              child: Text('Press me to go Home'),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
              onPressed: () async {
                if (!takingPicture) {
                  takingPicture = true;
                  controller!.takePicture().then(
                    (value) {
                      selectedImage = value;
                      setState(() {});
                      takingPicture = false;
                    },
                  );
                }
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: selectedImage != null
                ? Container(
                    height: 100,
                    width: 200,
                    child: Image.file(
                      File(selectedImage!.path),
                    ),
                  )
                : Container(),
          ),
        ],
      ),
    );
  }
}