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

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

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

Answer 3

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

//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 4

我将使用一个简单的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)State的build()方法和super.dispose()in 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 5

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

 import 'package:flutter/services.dart';

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

Answer 6

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

import services.dart


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

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

Answer 7

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