Flutter App iPhone设置竖屏&iPad设置横屏

2021-08-19 本文已影响0人天上飘的是浮云

铛铛铛~，偶又来了。。。

本来项目只需要适配手机就设置了竖屏，后来也需要适配ipad和Android平板。其实在Android中还是非常容易的，直接在MainActivity.java中设置就可以了。在Flutter端也可以设置，但是最好还是在原生端设置，因为Flutter界面是框在原生里的，所以原生先行，能在原生中设置为上策。

需求：iphone固定竖屏，ipad固定横屏

首先这种需求貌似可以从两个方面入手，原生端可以设置横竖屏，Flutter端也可以设置横竖屏。这边都来聊一聊

一、Flutter 端设置横竖屏

在main.dart中设置：

    // 强制竖屏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown
    ]);

这种横竖屏在Flutter端设置的时机当然是越早越好了，如果说应用一开始就确定了只支持横屏或者竖屏，在Flutter端设置其实没啥问题。当是我们这里得判断是手机还是平板，这就会造成判断和设置时机的滞后，带来比如先横屏后竖屏或者先竖屏后横屏的状况。这种情形在Flutter端设置就并不可取了。

那我们还是转战原生端吧。

二、Android端设置横竖屏

做过Android原生开发的就知道，在Android中设置横竖屏简直不要太容易，sososo easy~

2.1 首先，如果我们一开始就确定横竖屏的话，直接在AndroidManifest.xml中activity标签中就可以修改了

     <activity
            android:name=".MainActivity"
            ...
            android:screenOrientation="portrait">

     </activity>

2.2 因为我们这里要区分phone和tablet，所以并不能直接在AndroidManifest.xml中修改，我们需要在MainActivity.kt中修改

   override fun onCreate(savedInstanceState: Bundle?) {
        //尽早设置横竖屏
        setOrientation()
        super.onCreate(savedInstanceState)
        ...
    }

    //设置横竖屏
    fun setOrientation(){
        var isTablet = isTabletDevice(context)
        if(isTablet && requestedOrientation != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE){
            requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
        }else if(!isTablet && requestedOrientation != ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){
            requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
        }
    }

    //判断是不是Tablet
    fun isTabletDevice(context: Context): Boolean {
        var screenlayout = context.resources.configuration.screenLayout
        var x = screenlayout.and(Configuration.SCREENLAYOUT_SIZE_MASK)
        return (x >= Configuration.SCREENLAYOUT_SIZE_LARGE)
    }

三、iOS端设置横竖屏

3.1 首先我们需要在Runne->General中设置横竖屏都支持

设置好横竖屏都支持，并且支持iphone和ipad。

如何配置iPhone只支持竖屏，ipad只支持横屏呢，也有几种方式。

3.2 在Info.plist中配置

在Info.plist中因为之前General中勾选了Portrait和LandScape都支持，所以Info.plist配置开始如图：

初始状态

这表明在iPhone和iPad中横竖屏都支持，那我是不是可以去掉几个配置，使得iphone只留下竖屏配置，ipad只留下横屏配置呢？当然可以~

修改后的配置

然后忐忑的运行了一下，诶~ 没毛病真的可行。

结果等到要发布应用到AppStore的时候，打脸了，报了个错，如图：

意思是：iPad要求Portrait/PortraitDown/LandscapeLeft/LandscapeRight，结果只发现了LandscapeLeft/LandscapeRight，你是在逗偶吗？

木得办法只得把Info.plist横竖屏配置又给加回去，结果就通过了。看来此路不通，只得另辟蹊径了~

3.3 AppDelegate.swift中修改

前方传来好消息，iOS同学说可以在AppDelegate.swift加入这段代码：

    override func application(_ application: UIApplication, supportedInterfaceOrientationsFor
                            window: UIWindow?)-> UIInterfaceOrientationMask {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return .landscape;
        }
        return .portrait;
    }

运行了下，发现iphone确实可以只支持竖屏了，可是iPad貌似不起作用，百思不得其姐丫，无奈愤而删之~ 我就不信了。

3.4 自定义ViewController

想了下在Android中是在Activity中做的处理，在iOS中ViewController对应了Activity，系不系也是一样滴，说干就干~

3.3.1 首先，自定义一个ViewController和AppDelegate.swift平级吧

import Foundation

class MyviewController: FlutterViewController {
    
    override var supportedInterfaceOrientations : UIInterfaceOrientationMask {
        if UIDevice.current.userInterfaceIdiom == .phone {
           return UIInterfaceOrientationMask.portrait
        }
        else {
           return UIInterfaceOrientationMask.landscapeLeft
        }


    }
    
}

3.3.2 然后，找到Main.storyboard双击打开

点击ViewController，并在右边栏总Class项中输入你定义的ViewController，目的就是为了使自定义的ViewController与Main.storyboard绑定起来。

一图胜千言

3.3.3 最重要的一步，折在这里半天，自我怀疑，GoogleN遍。

来来来，解密~
在Runner->General中设置勾选Requires full screen，记住一定要勾选，不然代码不调用。