Question

在我的一个页面上，我需要将屏幕设置为横向模式并将其锁定，以便它不能旋转到纵向模式，而只能在一页上旋转。因此需要一种即时启用此功能的方法。有谁知道怎么做？

我希望它可以向左旋转或向右旋转，而不是纵向模式。

Answer 1

首先导入服务包：

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();
}

Answer 2

首先，将整个应用方向锁定为纵向模式。

//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]);
_interstitialAd.dispose();
super.dispose();
}

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

Answer 3

有时，由于有关方向的信息无效，因此无法正常工作。您可以像这样简单地使用它：

import services.dart


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

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

Answer 4

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

Answer 5

我将使用一个简单的 mixin 将手机纵向锁定为。以下解决方案将整个应用锁定为纵向或将特定屏幕设置为纵向，同时保持其他旋转。

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();
  }
}

/// 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,
  ]);
}

要阻止整个应用程序中的旋转，请在主PortraitModeMixin小部件中实施App。请记住以super.build(context)方法调用Widget build(BuildContext 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>。切记在州的super.build(context)方法中调用build()，在super.dispose()方法中调用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();
  }
}

具有此类语法的Mixins从Dart 2.1开始工作

Answer 6

导入services.dart，您的void main函数应类似于：

void main(){

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

Answer 7

您可以为此https://pub.dev/packages/orientation_helper使用direction_helper。主要目标是为应用程序中的每个屏幕设置方向。

Answer 8

导入 services.dart 包并添加以下代码以将设备方向锁定为 PortraitUp 模式：

 import 'package:flutter/services.dart';

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

Answer 9

对于 iOS 很重要。

在 info.plist 文件中启用方向。例如

步骤

在 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();
  }

Answer 10

将SystemChrome.setPreferredOrientations放在Widget build（）方法内，以将模式从纵向更改为横向。

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

在离开页面时，只需添加下面提到的代码即可将模式从横向更改为纵向。

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

Answer 11

在整个应用中锁定屏幕方向的简单方法

将 import 'package:flutter/services.dart'; 添加到 main.dart 文件的开头。
创建 SystemChrome.setPreferredOrientations(); 方法以在 MyApp 部分之前的 return 类的小部件构建区域中禁用屏幕旋转。
在方法的参数中使用 [DeviceOrientation.<orientation-type>] 指定方向。

使用以下之一代替 <orientation-type> ：

portraitUp
portraitDown
landscapeLeft
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(
        ),
      ),
    );
  }
}

颤动：如何按需设置和锁定屏幕方向

11 个答案: