颤动相机预览不随手机方向旋转
我是Dart/Flutter的新手，目前正在使用Flutter Camera Plugin，但当手机转到横向模式时，我遇到了CameraPreview的问题。图像保持垂直，不会随着手机旋转90度。
我尝试了无数的方法，包括Transform.rotate()，但我似乎无法将图像同时显示在屏幕上并旋转90度。
当我使用_cameraPreviewWidget查看手机时拍摄的照片时，它们仍然保存在正确的方向上。
回答 5
Stack Overflow用户
发布于 2019-08-21 12:46:24
一个名为camera_camera https://pub.dev/packages/camera_camera的包
你可以直接参考他的源代码或fork。
关于旋转问题，请使用此包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的方法，Stack和CameraPreview。它看起来更像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(),
),
),
),Stack Overflow用户
发布于 2018-06-01 06:30:21
当您在使用相机时旋转手机时，预览将保持垂直，但当您查看图像时，它将是横向的，尝试使用默认的相机应用程序，它将是相同的
显然，当手机旋转时，您可以旋转位于相机预览顶部的UI
Stack Overflow用户
发布于 2021-10-01 22:32:01
在我的例子中，一个真正的Android设备在横向方向将显示适当的相机预览内容，但由于设备不被“允许”旋转(由于应用程序清单/plist设置)，它显示为一个条形图，其中从左到右的宽像素显示在左侧从下到上的矩形中，其中该矩形较小，以便适合该维度……因此，屏幕的大部分都是空白区域。在仿真器上，这种现象不会发生(旋转按所需方式工作)。经过大量的搜索和故障排除后，解决方案是在显示相机预览时添加一些代码来修改允许的方向：
//allows any rotation (while camera preview is open)
Future<void> _enableRotation() async {
await SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
}
// may block rotation; sets orientation back to OS defaults for the app
Future<void> _backToOriginalRotation() async {
await SystemChrome.setPreferredOrientations([]);
}我在初始化CameraPreview的祖先时使用了await _enableRotation();，在处理时使用了await _backToOriginalRotation();。我使用了WillPopScope的onWillPop回调和await Navigator.of(context).maybePop<String>>(filepath);来关闭视图，当捕捉到一张图片时(以及图片被保存到路径filepath下的临时目录之后)，这样Android的后退按钮也可以通过onWillPop运行处理和旋转代码。
编辑:在iOS和安卓实际设备上测试后，这个修复在安卓手机上有效，但在iPhones上无效。当设备是横向的时，iPhones仍然以旋转的小条带显示相机预览。这是使用相机包版本0.8.1+7。
EDIT2:在更新iOS info.plist以允许任何设备方向之后，这种方法也适用于iPhones。然而，仍然存在预览方向(以及捕获的图像方向)不正确的设备和情况，导致大约50%的捕获的横向照片被横向保存(纵向)。如果您在打开相机预览时以横向方向启动设备，并且在捕获之前不旋转设备(或如果设备自动旋转屏幕设置关闭)，则可能会重现该问题。
https://stackoverflow.com/questions/50633608
复制相似问题
腾讯云开发者
