flutter开发拓展：全面屏、折叠屏适配与兼容问题

2020-01-16 15:12阅读：

http://blog.sina.cn/dpool/blog/u/2792234054

一启动白屏问题 采用Flutter 开发的app,无论Android还是Ios,都会出现白屏的现象，大概持续1-3秒，他会根据手机或模拟器的速溶而不同，时间可长可短。Flutter 应用在启动的时候会先启动Flutter SDK, 然后加载到内存里面，然后完成渲染，在这个过程中它是没有内容可以显示的，因此会显示白屏

二解决白屏问题
（1）可以在flutter项目中引入插件

https://pub.dev/packages/flutter_splash_screen
或
https://github.com/crazycodeboy/flutter_splash_screen

注意：Android App启动的时候，会有一个默认的白屏，这个白屏在启动的时候会显示主题，如果主体色不是透明的就会有个白屏
Android的白屏非两个部分，一个是主题的白屏（如果主题不是透明的时候，点击图标会显示白屏），二，当App启动起来之后，会显示启动屏（如果没有启动屏，会显示默认的白屏）

二 Flutter 全面屏适配指南

（1）全面屏特点，以及存在问题

特点：
1 大屏占比高、长宽比不再试16:9，达到了19.5:9甚至更高
2 短边的像素，density的取值是一样的所有适配的是长边

问题： 1. 传统布局的高度不足，导致上下留黑边
2. 基于屏幕顶部或底部的布局，如弹框，在全面屏手机上会发生位移
3. 安全区域问题

Flutter中全面屏的页面适配分两种情况：

1.一种是对于页面已经使用了Scaffold的appBar 与bottomNavigationBar页面是不需要额外适配的，因为Scaffold框架会自动化帮助我们完成这些适配工作；
2. 另外一种情况，没有使用了Scaffold或者Scaffold的appBar 与bottomNavigationBar页面，改如何适配全面屏呢？

（1）适配要点
. 顶部NavigationBar上部留安全区域
. 底部NavigationBar底部留安全区域

对于安全区域的适配有两种方案：

1. 采用 SafeArea来包裹页面，SafeArea是Flutter中的一个用于全面屏的一个组件，类似RN中SafeAreaView 主要用于解决适配全面屏手机的安全取悦问题；
2.借助MeadiaQuery.of(context).padding 获取屏幕四周的padding,然后根据padding自己手动实现对安全区域的控制；
. 方案一：相对简单的，只需要引入SafeArea，但不够灵活
. 方案二：需要借助MeadiaQuery.of(context).padding自己实现对安全区域的控制，相对复杂些，但灵活度高

# 采用SafeArea适配全面屏

对比：

# 借助 MediaQuery.of(context).padding手动适配

提示：使用MediaQuery.of时要留意它所属的widget 不能直接和runApp解除，需要一个带有MaterialApp的widget 包裹一下这样才能使用MediaQuery.of

最简单的是在Android 的androidmainfest.xml文件中添加 android.max_aspect:

android:name='android.max_aspect'
android:value='2.1'/> //这里的2.1 是长宽比

三折叠屏