Flattern: So stellen Sie die Bildschirmausrichtung bei Bedarf ein und sperren sie

Auf einer meiner Flatter-Seiten muss der Bildschirm in den Querformatmodus versetzt und gesperrt werden, damit er nicht in den Hochformatmodus gedreht werden kann, sondern nur auf einer Seite. Benötigen Sie also eine Möglichkeit, diese Funktion im laufenden Betrieb zu aktivieren. Weiß jemand, wie man das macht?

Ich möchte, dass es sich nach links oder rechts dreht, nur nicht in den Hochformatmodus.

Importieren Sie zuerst das Servicepaket:

import 'package:flutter/services.dart';

Dadurch erhalten Sie Zugriff auf die SystemChromeKlasse, die"Controls specific aspects of the operating system's graphical interface and how it interacts with the application."

Gehen Sie beim Laden des Widgets folgendermaßen vor:

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

Wenn ich dann die Seite verlasse, normalisiere ich sie wie folgt:

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

Ich würde ein einfaches Mixin verwenden , um das Telefon im Hochformat zu sperren . Die folgende Lösung sperrt die gesamte App im Hochformat oder setzt bestimmte Bildschirme auf Hochformat, während die Drehung an anderer Stelle beibehalten wird.

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

Um die Rotation in der gesamten App zu blockieren, implementieren Sie sie PortraitModeMixinim Haupt- AppWidget. Denken Sie daran, rufen Sie super.build(context)in Widget build(BuildContext context)Methode.

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

Um die Drehung in einem bestimmten Bildschirm zu blockieren, implementieren Sie sie PortraitStatefulModeMixin<SampleScreen>im Status des jeweiligen Bildschirms. Denken Sie daran, rufen super.build(context)in die staatlichen build()Verfahren und super.dispose()in dispose()Verfahren. Wenn es sich bei Ihrem Bildschirm um ein StatelessWidget handelt, wiederholen Sie einfach die Lösung der App (vorheriges Beispiel), dh verwenden Sie sie 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 mit einer solchen Syntax funktionieren ab Dart 2.1

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

Manchmal konnte es aufgrund von Nullinformationen zur Orientierung nicht funktionieren. Sie können es einfach so verwenden:

import services.dart


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

// Warten Sie nach dem Starten der App auf die Ausrichtung des Einstellungsbildschirms und -> sperren Sie dann die Ausrichtung

Import services.dartund Ihre void mainFunktion sollte wie folgt sein:

void main(){

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