Flutter应用程序中一个屏幕的屏幕方向/自动旋转

Question

我想在我的应用程序中只在一个屏幕上应用屏幕方向。我尝试使用if条件和orientation builder来应用它，但是不知何故无法正常工作。 例如，如果用户按下自动旋转按钮，则屏幕应根据旋转进行操作，但我仅希望在一个屏幕上实现该效果。

//main.dart

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






                  import 'dart:async';
                  import 'package:flutter/material.dart';
                  import 'package:permission_handler/permission_handler.dart';
                  import 'package:flutter_inappwebview/flutter_inappwebview.dart';
                  import 'package:flutter/services.dart';
                  import 'package:modal_progress_hud/modal_progress_hud.dart';
                  import 'package:provider/provider.dart';

                 class IframeScreen extends StatefulWidget {
                  @override
                 _IframeScreenState createState() => _IframeScreenState();
                  }

                 class _IframeScreenState extends State<IframeScreen> {

                  InAppWebViewController _webViewController;

                  IframeScreen iframe = new IframeScreen();

                  _IframeScreenState(
  
                   @override
                   void initState() {
                   onLoadingTesting().then((value) {
                   print('check modalprogress');


                 });

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

            InAppWebView webViewMethod() {
            WidgetsFlutterBinding.ensureInitialized();
            Permission.camera.request();
            Permission.microphone.request();
           }
          }

           @override
           Widget build(BuildContext context) {
           return ModalProgressHUD(
  inAsyncCall: _saving,
  child: WillPopScope(
    onWillPop: (){
      if(MediaQuery.of(context).orientation==Orientation.landscape){
        SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
      }

      return Future.value(true);
    },
    child: Scaffold(
      body:  OrientationBuilder(
        builder: (BuildContext context,orientation) {
          return Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                      initialUrl:
                      "https://appr.tc/r/158489234",
                      initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(
                          mediaPlaybackRequiresUserGesture: false,
                          debuggingEnabled: true,
                        ),
                      ),
                      onWebViewCreated: (
                          InAppWebViewController controller) {
                        _webViewController = controller;
                      },
                      androidOnPermissionRequest:
                          (InAppWebViewController controller, String origin,
                          List<String> resources) async {
                        return PermissionRequestResponse(
                            resources: resources,
                            action: PermissionRequestResponseAction.GRANT);
                      }),
                ),
              )
            ],

          );
        }
      )

    ),
  ),
);

}

- utkarsh

Answer 1

为此，您应在main()方法中设置首选方向，如下：

WidgetsFlutterBinding.ensureInitialized(); 
  await SystemChrome.setPreferredOrientations(
    [DeviceOrientation.portraitDown, DeviceOrientation.portraitUp]);

通过对这个示例代码进行设置，确保您的应用程序将保持竖屏状态，直到您进行更改。

建议在需要横屏的屏幕中，不要在Dispose函数内更改方向，而是将Scaffold包装在“WillPopScope”中，并按以下方式实现OnWillPop()方法：

onWillPop: () {
    if (MediaQuery.of(context).orientation == Orientation.landscape) {
      SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
    }
    return Future.value(true);
  },

这将使从横屏切换到竖屏更加顺畅。

干杯！

- thusith.92

---

@utkarsh 是的，它会。 - thusith.92

我已经按照你建议的添加了所有东西，但我的应用程序并没有按照我想要的方式工作。似乎存在一些问题。我只想让我的一个屏幕根据自动旋转进行更改，但这里所有的屏幕都被旋转了，如果我将其设置为横向模式，则不会更改。此外，如果我尝试在纵向模式下更改屏幕，则屏幕仍然保持在横向模式。我已编辑了我的代码，请看一下。 - utkarsh

嗨@utkarsh，您忘记添加以下内容：SystemChrome.setPreferredOrientations ([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);在_IframeScreenState类的'initState（）'方法中。 - thusith.92