Flutter全面屏适配

发表于 更新于 分类于
无论是安卓设备还是iOS设备，适配的要点主要是屏幕上方的安全区域和屏幕底部的安全区域。对于已经使用`Scaffold`的`appBar`和`bottomNavigationBar`的页面不需要额外适配。`Scaffold`框架已经帮我们完成了这些适配工作。

Overview

无论是安卓设备还是iOS设备，适配的要点主要是屏幕上方的安全区域和屏幕底部的安全区域。

对于已经使用Scaffold的appBar和bottomNavigationBar的页面不需要额外适配。Scaffold框架已经帮我们完成了这些适配工作。

1.引入SafeArea

SafeArea是Flutter中适配全面屏的组件，采用SafeArea包裹页面可以解决全面屏手机的安全区域问题。

1
2
SafeArea(
)

2.借助MediaQuery

可以借助MediaQuery.of(context).padding方法获取屏幕的安全区域即四个方向的padding，然后就可以更加灵活地进行布局。

1
2
/// 获取当前的 padding 信息
final EdgeInsets edgeInsets = MediaQuery.of(context).padding;

3.关于安卓

需要在AndroidManifest.xml文件中添加下方配置。

1
2
3
4
5
6
 <!-- 添加 Android 可以适配的最大宽高比为 2.5 : 1 , 适配全面屏添加 -->
 <meta-data
     android:name="android.max_aspect"
     android:value="2.5"/>
<meta-data android:name="android.min_aspect"
    android:value="1.0" />