手记

【备战春招】第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:src="@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" />

课程总结

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

1人推荐
随时随地看视频
慕课网APP