web-dev-qa-db-fra.com

Flutter: comment définir et verrouiller l'orientation de l'écran à la demande

Sur l'une de mes pages flottantes, l'écran doit être configuré en mode paysage et verrouillé de sorte qu'il ne puisse pas pivoter en mode portrait, mais uniquement sur une page. Donc besoin d'un moyen d'activer cette fonction à la volée. Quelqu'un sait-il comment faire ça?

Je voudrais qu'il tourne paysage-gauche ou paysage-droite, mais pas en mode portrait.

flutterscreen-orientationdevice-orientation
27
Jus10

Commencez par importer le package de services:

import 'package:flutter/services.Dart';

Cela vous donnera accès à la classe SystemChrome, qui "Controls specific aspects of the operating system's graphical interface and how it interacts with the application."

Lorsque vous chargez le widget, procédez comme suit:

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

puis quand je quitte la page, remettez-le à la normale comme ceci:

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

Je voudrais utiliser un simple mixin pour verrouiller le téléphone en portrait . La solution suivante verrouille l’application entière en portrait ou définit des écrans spécifiques sur portrait en gardant la rotation ailleurs.

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

Pour rotation du bloc dans l'application entière implémenter PortraitModeMixin dans le widget principal App. N'oubliez pas d'appeler super.build(context) dans la méthode 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"),
    );
  }
}

Pour rotation de bloc dans un écran spécifique implémenter PortraitStatefulModeMixin<SampleScreen> Dans l'état de l'écran spécifique. N'oubliez pas d'appeler super.build(context) dans la méthode build() de l'État et la méthode super.dispose() dans la méthode dispose(). Si votre écran est un StatelessWidget - répétez simplement la solution de l'application (exemple précédent), par exemple, utilisez 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();
  }
}

Les mixins avec une telle syntaxe fonctionnent à partir de Dart 2.1

7
kosiara - Bartosz Kosarzycki