【备战春招】第20天 Flutter 中启动白屏、全面屏、折叠屏的适配

课程名称：Flutter从入门到进阶 实战携程网App 一网打尽核心技术
课程章节：Flutter进阶拓展：全面屏、折叠屏适配与兼容
课程讲师：CrazyCodeBoy

课程内容

启动白屏问题

应用启动白屏的问题，在Native 开发的应用上也是一个常见的问题，白屏的时长跟设备的性能有密切关系，设备的性能越低，白屏的时间就会越长。这主要是因为从用户点击 icon 到应用的首页显示，设备需要在段时间完成初始化的工作。

在 Flutter 开发的应用上，白屏的问题会更加的明显，因为除了 Native 应用本身初始化的耗时，还增加了 Flutter 初始化的耗时。

Android原生的白屏问题可以通过给启动的 Activity 设置 windowBackground属性，Flutter 也是基于此办法，同时优化了 Flutter 初始化阶段的白屏问题（覆盖一个launchView），只用两步设置便能解决 Flutter 中白屏问题。

• 在项目的 android/app/src/main/res/mipmap-xhdpi/ 目录下添加闪屏图片；
• 打开 android/app/src/main/res/drawable/launch_background.xml 文件，这个文件就是闪屏的背景文件；

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/background_dark" />
    <!-- You can insert your own image assets here -->
    <item
        android:bottom="84dp">
        <bitmap
            android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@mipmap/launch_image" />
    </item>
</layer-list>

在Flutter渲染第一帧之前，可以通过这里的配置显示一个Android view，用来显示一张启动图片。对于app启动加载和Flutter开始渲染之间的一段时间，起到一个良好的过渡。

全面屏适配

现在的移动设备长宽比早就不是之前的16：9了，比如iphoneX 的长宽比为13：6，而现在多数的Android手机都到了19.5：9，有的甚至达到了21：9。全面屏的适配的主要问题就是集中在如下两点：

• 顶部的appBar预留安全区域;
• 底部的bottomNavigationBar预留安全区域;

针对这两种问题，Flutter 给出了以下方案：

• 使用Scaffold的appBar和bottomNavigationBar组件，它内部对全面屏进行了适配。
• 使用SafeAreaWidget进行包裹组件来适配全面屏；
• 使用 MediaQuery.of(context).padding 这个Api来获取上下左右的安全padding,根据这个padding进行适配。

折叠屏适配

Flutter3已支持折叠屏的移动设备，主要是通过MediaQuery包含的DisplayFeatures列表，用于描述显示部件的边界和状态，如铰链、折叠和刘海等。DisplayFeatureSubScreen widget现在在定位其子widget时，不会与DisplayFeatures的边界重叠，且已经适配了Flutter的对话框和弹出窗口。

此外还有以下几种方式：
1.屏幕自适应配置
在 AndroidManifest.xml 的清单文件中 设置 activity 或 application 的 android:resizeableActivity 属性为 true ;

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_screen_adaption">
   <application
        android:label="flutter_screen_adaption"
        android:resizeableActivity="true"
        android:icon="@mipmap/ic_launcher">
    </application>
</manifest>

2.设置切换屏蔽宽高比不重启适配
在AndroidManifest.xml的清单文件中的activity节点配置android:configChanges="screenSize|orientation|smallestScreenSize"属性;

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_screen_adaption">
   <application
        android:label="flutter_screen_adaption"
        android:resizeableActivity="true"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
        </activity>
    </application>
</manifest>

3.设置最大最小屏幕比例
设置最大宽高比，在AndroidManifest.xml的清单文件中的application节点下配置。

<meta-data
    android:name="android.max_aspect"
    android:value="2.1"/>

设置最小宽高比，在 AndroidManifest.xml的清单文件中的application节点下配置。

<meta-data android:name="android.min_aspect"
    android:value="1.0" />

课程总结

这一节介绍了启动应用时出现的白屏问题，对全面屏、折叠屏的适配。启动页被设计的初衷就是起一个过渡的作用，让用户在使用感受上不会觉得太过突兀。