Flutter开发笔记17 - 全屏幕与折叠屏适配指南

全屏幕特点，及存在的问题

全面屏手机的特点：

• 大、屏占比高、长宽比达到了19.5:9甚至更高；
• 短点的像素、density的取值都是一样的，所以需要适配的是长。

问题：

• 传统布局的高度不足，导致上下留黑边；
• 基于屏幕顶部和底部的布局，如弹框，在全面屏上显示会发生位移；
• 安全区域的问题。

 

适配要点

顶部NavigationBar的上面和底部NavigationBar的下面要预留安全区域。

 

适配方案

1、使用了Scaffold的appbar与bottomNavigationBar是不需要适配的，因为Scaffold框架会自动帮我们完成这些适配工；

2、使用SafeArea来包裹页面，SafeArea是Flutter中的一个用于适配全面屏的组件，简单但是相较于第三点不灵活。类似于iOS中storyboard中的Safe Area Relative Margins和React Native的SafeAreaView；

3、借助MediaQuery.of(context).padding来获取屏幕四周的padding，然后根据padding自己手动实现对安全区域的控制（简单且灵活）。