颤动: 如何根据需要设置和锁定屏幕方向

在我的颤动页面之一，我需要屏幕设置为横向模式，并锁定它，所以它不能旋转到肖像模式，但只有在一个页面。因此需要一种方法来动态启用这个函数。有人知道怎么做吗？

我希望它旋转景观-左或景观-右，只是不进入肖像模式。

118502 次浏览
小开
最佳答案

首先输入服务套件:

import 'package:flutter/services.dart';

这将使您能够访问 SystemChrome类，即 "Controls specific aspects of the operating system's graphical interface and how it interacts with the application."

加载 Widget 时，执行以下操作:

@override
void initState(){
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
}

然后当我离开页面，把它像这样恢复正常:

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

我会用一个简单的 混音到 将手机锁定在画面中。下面的解决方案锁定的 整个应用程序的肖像或 设置特定的屏幕的纵向，同时保持旋转其他。

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';


/// Forces portrait-only mode application-wide
/// Use this Mixin on the main app widget i.e. app.dart
/// Flutter's 'App' has to extend Stateless widget.
///
/// Call `super.build(context)` in the main build() method
/// to enable portrait only mode
mixin PortraitModeMixin on StatelessWidget {
@override
Widget build(BuildContext context) {
_portraitModeOnly();
return null;
}
}


/// Forces portrait-only mode on a specific screen
/// Use this Mixin in the specific screen you want to
/// block to portrait only mode.
///
/// Call `super.build(context)` in the State's build() method
/// and `super.dispose();` in the State's dispose() method
mixin PortraitStatefulModeMixin<T extends StatefulWidget> on State<T> {
@override
Widget build(BuildContext context) {
_portraitModeOnly();
return null;
}


@override
void dispose() {
_enableRotation();
super.dispose();
}
}


/// blocks rotation; sets orientation to: portrait
void _portraitModeOnly() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
}


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

要在主 App小部件中实现 PortraitModeMixin，请记住在 Widget build(BuildContext context)方法中调用 super.build(context)。

/// Main App widget
class App extends StatelessWidget with PortraitModeMixin {
const App();


@override
Widget build(BuildContext context) {
super.build(context);
return CupertinoApp(
title: 'Flutter Demo',
theme: CupertinoThemeData(),
home: Text("Block screen rotation example"),
);
}
}

在特定屏幕状态下实现 PortraitStatefulModeMixin<SampleScreen>。请记住在 State 的 build()方法中调用 super.build(context)，在 dispose()方法中调用 super.dispose()。如果你的屏幕是 StatelessWidget-只需重复应用程序的解决方案(前面的例子) ，即使用 PortraitModeMixin。

/// Specific screen
class SampleScreen extends StatefulWidget {
SampleScreen() : super();


@override
State<StatefulWidget> createState() => _SampleScreenState();
}


class _SampleScreenState extends State<SampleScreen>
with PortraitStatefulModeMixin<SampleScreen> {
@override
Widget build(BuildContext context) {
super.build(context);
return Text("Flutter - Block screen rotation example");
}


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

从 Dart 2.1中可以看到这种语法的混合

小开

有时它不能工作，由于空信息的方向。 你可以像这样简单地使用它:

import services.dart




void main() {
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp]
)
.then((_) {
runApp(new MyApp());
});
}

//启动应用程序后等待设置屏幕方向，然后锁定方向

小开 
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
.then((_) {
runApp(new MyApp());
});
}
小开

导入 services.dart，你的 void main函数应该是这样的:

void main(){


WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
.then((_){
runApp(MyApp());
}
);
}
小开

对于这个 https://pub.dev/packages/orientation_helper，您可以使用  方向 _ 助手。它的主要目标是为应用程序中的每个屏幕设置方向。

小开

导入 services.dart 包，并添加以下代码以将设备方向锁定到 portraitUp 模式:

 import 'package:flutter/services.dart';


main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
runApp(MyHomePage());
}
小开

对 iOS 很重要。

  • 在 info.plist 文件中启用方向enter image description here

步骤

  • 在 main.dart 文件中设置方向。在我的情况下，我的应用程序只支持纵向除了一个屏幕，所以我需要设置纵向模式在第一时间。例如
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp,DeviceOrientation.portraitDown,]);
  • 在需要旋转的屏幕中添加以下代码。
  void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
}
@override
dispose(){
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}
小开

首先，将整个应用程序方向锁定到肖像模式。

//Do this in main.dart
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
.then((_) {
runApp(MyApp());
});

其次，转到你想改变方向的特定屏幕。

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


SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft
]);

}

@override
void dispose() {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
super.dispose();
}

要使用 SystemChrome，你必须添加 'package:flutter/services.dart'

小开

锁定整个应用程序屏幕方向的简单方法

  • 将 import 'package:flutter/services.dart';添加到 main.dart文件的开头。

  • 创建 SystemChrome.setPreferredOrientations();方法以禁用 MyApp类的 Widget 构建区域中 return部分之前的 Screen 旋转。

  • 在方法的参数中使用 [DeviceOrientation.<orientation-type>]指定方向。

使用下列其中之一代替 <orientation-type>:

  1. portraitUp
  2. portraitDown
  3. landscapeLeft
  4. landscapeRight

示例代码:

import 'package:flutter/material.dart';
 

import 'package:flutter/services.dart' ;
 

void main() => runApp(MyApp());
 

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
 

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

return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Screen Orientation"),
),
body: Container(
),
),
);
}
}
小开

给那些喜欢用钩子的人

import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';


useOrientation(List<DeviceOrientation> orientations) {
useEffect(
() {
SystemChrome.setPreferredOrientations(orientations);
return () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
};
},
);
}

像这样使用:

class MyWidget extends HookWidget {
void build(BuildContext context) {


useOrientation([DeviceOrientation.portraitUp]);


return Container();
}
}
小开

设置颤振的首选方向。

// import this package
import 'package:flutter/services.dart';


// Lock the orientation to Portrait Only
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
.then((value) => runApp(MyApp()));

您还可以在 setPreferredOrientations列表中添加首选方向，如 [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]

以下是你可以设定的方向:

/// If the device shows its boot logo in portrait, then the boot logo is shown
/// in [portraitUp]. Otherwise, the device shows its boot logo in landscape
/// and this orientation is obtained by rotating the device 90 degrees
/// clockwise from its boot orientation.
portraitUp,


/// The orientation that is 90 degrees clockwise from [portraitUp].
///
/// If the device shows its boot logo in landscape, then the boot logo is
/// shown in [landscapeLeft].
landscapeLeft,


/// The orientation that is 180 degrees from [portraitUp].
portraitDown,


/// The orientation that is 90 degrees counterclockwise from [portraitUp].
landscapeRight,

档号: https://greymag.medium.com/flutter-orientation-lock-portrait-only-c98910ebd769

小开

在 AndroidManifest 文件主文件夹中的活动标签下设置 android:

<activity android:windowSoftInputMode="adjustResize" android:screenOrientation = "portrait">
小开

在 GetX 中，您需要像下面这样使用 GetBuilder:


final Controller ctrl = Get.find();


GetBuilder<Controller>(
initState: (_) => ctrl.setLandscape(),
dispose: (_) => ctrl.setPortrait(),
builder: (code) => Container(
padding: const EdgeInsets.zero,
alignment: Alignment.Center,
child: const SizedBox(),
),
),

在 Controller 文件中:

    class Controller extends GetxController {
RxBool isLandscape = false.obs;


Future<void> setLandscape() async {
if (isLandscape.isTrue) {
await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
update();
}
}
      

Future<void> setPortrait() async {
if (isLandscape.isFalse) {
await SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
update();
}
}
}

我希望这个解决方案能够回答使用 GetX 作为主要状态管理的开发人员的问题。祝你好运，兄弟！上帝保佑你们。


提交答案