web-dev-qa-db-ja.com

Flutter：オンデマンドで画面の向きを設定およびロックする方法

フラッターページの1つで、画面を横向きモードに設定してロックし、縦向きモードに回転できないようにする必要がありますが、1ページだけです。そのため、この機能をオンザフライで有効にする方法が必要です。誰もこれを行う方法を知っていますか？

縦向きモードだけではなく、横向き左または横向き右に回転させたい。

flutterscreen-orientationdevice-orientation
27
Jus10

最初にサービスパッケージをインポートします。

import 'package:flutter/services.Dart';

これにより、SystemChromeクラスにアクセスできます。このクラスは"Controls specific aspects of the operating system's graphical interface and how it interacts with the application."

ウィジェットをロードするとき、次のようにします。

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

シンプルなmixin tolock phone in portraitを使用します。次のソリューションでは、portraitでアプリ全体をロックするか、特定の画面を設定します他の回転を維持しながらの肖像画。

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

このような構文のミックスインはDart 2.1から機能します

7
kosiara - Bartosz Kosarzycki