一、Flutter 全面屏适配

传统的 Android 屏幕的宽高比是 16 : 9 16 : 9 16:9 , 但是当前主流的全面屏手机 , 基本已经都是 19.5 : 9 19.5:9 19.5:9 , 20 : 9 20:9 20:9 , 21 : 9 21:9 21:9 的宽高比 , 基本达到了 2 : 1 2:1 2:1 左右的宽高比 ;

适配全面屏主要是适配比较长的这个边 ;

全面屏适配内容 :

高度适配 : 传统的布局按照 16 : 9 16:9 16:9 进行布局 , 高度不足 , 如果适配到全屏屏中 , 导致无法填充满整个屏幕 ;

位置适配 : 基于屏幕顶部 / 底部摆放的组件 , 会出现偏移 , 没有按照设计位置摆放 ;

安全区域适配 : 在一些手机中 , 顶部有刘海 , 水滴等摄像头位置 , 底部有话筒 , 这些位置不能填充组件 , 有被阻挡的风险 ;

二、全面屏适配的情况

全面屏适配要点 :

在页面中使用了 Scaffold 的 appBar 和 bottomNavigationBar , Scaffold 框架会自动按照全面屏的机制进行适配 , 不需要开发者进行手动干预 ;
如果页面中没有使用 Scaffold , 或者使用了 Scaffold 没有使用 appBar 和 bottomNavigationBar , 这样顶部导航栏偏上 , 底部导航栏偏下 , 这里需要适配一下 ;

三、全面屏适配方法

全面屏适配方法 : 在顶部和底部留出足够的安全区域 ;

方案一 : Flutter 中提供了一个 SafeArea 组件 , 使用该组件包裹页面 , 可以实现适配 ;

方案二 : 使用 MediaQuery.of(context).padding 获取屏幕四个方向上的 Padding ;

四、反面示例 ( 留海遮挡内容 )

华为 Mate 30 手机中 , 使用如下代码 , 显示的内容 , 顶部没有预留足够的安全区域 , 导致部分内容

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Container(decoration: BoxDecoration(color: Colors.white,),child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text("顶部内容"),Text("底部内容"),],),),);}
}

这是华为 Mate 30 的真机展示样式 ; 如果使用截图 , 无法看到被留海遮挡的样式 ;

五、Android 中配置最大宽高比

在 flutter_screen_adaption\android\app\src\main\AndroidManifest.xml 清单文件中的 application 节点下 , 配置 android.max_aspect 最大可适配的宽高比配置 ;

<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.example.flutter_screen_adaption"><applicationandroid:label="flutter_screen_adaption"android:icon="@mipmap/ic_launcher"><!-- 添加 Android 可以适配的最大宽高比为 2.5 : 1 , 适配全面屏添加 --><meta-dataandroid:name="android.max_aspect"android:value="2.5"/></application>
</manifest>

六、使用 SafeArea 进行全面屏适配

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Container(decoration: BoxDecoration(color: Colors.white,),child: SafeArea(child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text("顶部内容"),Text("底部内容"),],),),),);}
}

适配后的样式 :

七、使用 MediaQuery 进行全面屏适配

import 'package:flutter/material.dart';/// 使用 MediaQuery 进行全面屏适配
void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: HomePage(),);}
}class HomePage extends StatelessWidget{@overrideWidget build(BuildContext context) {/// 获取当前的 padding 信息final EdgeInsets edgeInsets = MediaQuery.of(context).padding;return Container(decoration: BoxDecoration(color: Colors.white,),padding: EdgeInsets.fromLTRB(0, edgeInsets.top, 0, edgeInsets.bottom),child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text("顶部内容"),Text("底部内容"),],),);}
}

适配后的样式 :

八、博客资源

GitHub 地址 : https://github.com/han1202012/flutter_screen_adaption

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )相关推荐

xz2p更新android 9,索尼 XZ2 迎来安卓 9.0 更新，但少了全面屏手势
上周末,在 iOS 12 正式版亮相不到一个月的时间里,苹果方面就已经宣布在过去四年里发布的 iOS 设备中,运行 iOS 12 的设备占比达到 53%.但在对比之下,Android P 已经发布了近 ...
android设置title_2020年全网最全的关于iOS、Android设计规范、适配总结
作者:蜗牛和笔设计人在创新的脚步中也应该温故知新,让我们一起来对iOS.Android的设计规范.适配问题做一次全面的梳理和复习吧. 双20年终究还是来了,互联网产品对于这个时代不是什么新鲜事了,互 ...
flutter 局部状态和全局状态区别_给 Android 开发者的 Flutter 指南
这篇文档旨在帮助 Android 开发者利用既有的 Android 知识来通过 Flutter 开发移动应用.如果你了解 Android 框架的基本知识,你就可以使用这篇文档作为 Flutter 开发 ...
【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题
. 作者 :万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/19698511 . 最近遇到了一系列的屏幕适配问题, 以及 ...
手把手教你安装Flutter(Flutter起步之安装)
官网有介绍的这里就不说,主要有几个步骤: 镜像设置下载flutter SDK(更新系统环境变量PATH,先不要运行flutter doctor,因为你还没有装android sdk和编辑器) and ...
Android 屏幕适配攻略（六）设置通知样图标与启动图标适配
Android 屏幕适配攻略(六)设置通知样图标与启动图标适配 1 Android中资源文件中的图片加载分析 Android中对屏幕的像素适配处理分类屏幕密度对应的标签对应的像素 120dip ...
Android 悬浮窗，绝对是目前相关悬浮窗开源库最完美的适配方案
PerfectFloatWindow 项目地址:Alonsol/PerfectFloatWindow 简介: android 全局悬浮窗,目前已经适配华为,小米,vivo,oppo,一加,三星,魅族, ...
悬浮球（多机型悬浮窗权限设置，状态栏适配，可自动或手动设置大小，点击跳转WebView，拖拽处理）
悬浮球:多机型悬浮窗权限设置,状态栏适配,可自动或手动设置大小,点击跳转WebView,拖拽处理, 应用内和应用外都可以显示(可设置取消)可做SDK 和依赖类,横竖屏切换处理项目地址: GitHub ...
android应用的屏幕适配,移动APP测试：Android屏幕适配问题一
原标题:移动APP测试:Android屏幕适配问题一 Android中适配问题,是最常见和最难解决的事情,下面笔者就带着大家来说一下适配的相关操作. Android可以为当前的屏幕配置通过适当的方式管 ...

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

文章目录