Flutter 全屏幕适配

1. 全屏幕特点,及存在的问题

特点:

1. 大,屏占比高,长宽比不再是16:9,达到19.5:9甚至更高
2. 短边的像素.density的取值都是一样的,所以需要适配的是长边

2. 全面屏的页面适配分两种情况

1. 一种是对于在页面已经使用了Scaffold的appBar与bottomNavigationBar的页面是不需要额外适配的,Scaffold已经帮我们完成了适配的工作
   2)另外一种情况,那么有很多页面没有用到Scaffold或者Scaffold的appBar与bottomNavigationBar需要在顶部和底部NavigationBar预留安全区域

3.适配安全区有两种方案

1. 采用SafeArea来包裹,SafeArea是Flutter中的一个用于适配全面屏的组件,
   2)借助MediaQuery.of(context).padding获取四周的padding,然后根据Padding手动实现对安全区域的控制,自己实现对安全区域的控制,相对复杂些,但灵活度高

final EdgeInsets padding = MediaQuery.of(context).padding;
Container( 
    padding:EdgeInsets.fromLTRB(0,padding.top,0,padding.bottom),
    child:Column( 
          mainAxisAlignment:MainAxisAlignment.spaceBetween,
          children:<Widget>[],
        ),
)

实例.png

3.Android全面屏适配

全屏显示区域是屏幕区域减去导航栏的区间,当隐藏导航栏时,就是整个屏幕区间.按Google的要求如果应用未做相应的适配此区间长宽比必须在1.3333和1.86之间
在Android/app/src/main/res/AndroidManifest.xml中添加配置

<!--适配全面屏-->
<meta-data
          android:name="android.max_aspect"
          android:value="2.3"  />

4.折叠屏安卓的屏幕适配配置

在Android/app/src/main/res/AndroidManifest.xml中添加配置

<activity android:minAspectRatio="1.0">
        </activity>

在Android/app/src/main/res/AndroidManifest.xml的<activity>节点中的android:configChanges属性添加orientation|screenSize|smallestScreenSize

 android:configChanges="orientation|screenSize|smallestScreenSize"