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

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

我会用一个简单的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 - 只需重复App的解决方案（上一个示例），即使用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 3

将SystemChrome.setPreferredOrientations放在Widget build（）方法中，以将模式从Portrait更改为Landscape。

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

离开页面时，只需添加下面提到的代码，用于将模式从Landscape更改为Portrait。

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