【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )
2023-06-13 09:17:55 时间
文章目录
- 一、Flutter 全面屏适配
- 二、全面屏适配的情况
- 三、全面屏适配方法
- 四、反面示例 ( 留海遮挡内容 )
- 五、Android 中配置最大宽高比
- 六、使用 SafeArea 进行全面屏适配
- 七、使用 MediaQuery 进行全面屏适配
- 八、博客资源
一、Flutter 全面屏适配
传统的 Android 屏幕的宽高比是
, 但是当前主流的全面屏手机 , 基本已经都是
,
,
的宽高比 , 基本达到了
左右的宽高比 ;
适配全面屏主要是适配比较长的这个边 ;
全面屏适配内容 :
高度适配 : 传统的布局按照
进行布局 , 高度不足 , 如果适配到全屏屏中 , 导致无法填充满整个屏幕 ;
位置适配 : 基于 屏幕 顶部 / 底部 摆放的组件 , 会出现偏移 , 没有按照设计位置摆放 ;
安全区域适配 : 在一些手机中 , 顶部有刘海 , 水滴 等摄像头位置 , 底部有话筒 , 这些位置不能填充组件 , 有被阻挡的风险 ;
二、全面屏适配的情况
全面屏适配要点 :
- 在页面中使用了 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 {
@override
Widget 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">
<application
android:label="flutter_screen_adaption"
android:icon="@mipmap/ic_launcher">
<!-- 添加 Android 可以适配的最大宽高比为 2.5 : 1 , 适配全面屏添加 -->
<meta-data
android:name="android.max_aspect"
android:value="2.5"/>
</application>
</manifest>
六、使用 SafeArea 进行全面屏适配
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget 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 {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget{
@override
Widget 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
相关文章
- android系统开机画面_Android开机画面
- android签名命令行,Android系统签名位置及命令
- android autosize原理,Android屏幕适配头条:autosize的原理
- Android UI设计
- android sdk manager安装,Android SDK Manager安装过程
- android 验证码短信验证码,Android短信验证码倒计时验证的2种常用方式
- android toast全屏,Android Toast实现全屏显示
- 原有Android项目中体验Flutter
- android 程序员跳槽需要注意哪些?
- Android 用户态启动流程分析
- 【错误记录】Flutter / Android 报错 ( AAPT: error: attribute android:requestLegacyExternalStorage not found )
- 【错误记录】未安装该应用 ( 在 Android 12 之后 组件设置 android:exported=“false“ 属性 )
- 【错误记录】编译 Android 版本的 ijkplayer 报错 ( ./init-android.sh: 第 37 行: cd: android/contrib/: 没有那个文件或目录 )
- 【Android UI】贝塞尔曲线 ④ ( 使用 android.graphics.Path 提供的 cubicTo 方法绘制三阶贝塞尔曲线示例 )
- 【错误记录】Android Studio 编译报错 ( Could not resolve com.android.tools.build:gradle:7.4.2. )
- Android控制文字水平间距android:letterSpacing详解手机开发
- Android中android:visibility的3中属性的剖析详解手机开发
- Android端Vivaldi 3.6发布:引入Page Action功能 可自定义网页外观
- Connecting Android to Oracle: The Ultimate Guide for Seamless Integration.(android连接oracle)
- Android开发笔记改变字体颜色的三种方法
- android版本检测Android程序的版本检测与更新实现介绍
- android中处理各种触摸事件的方法浅谈
- Android中的android:layout_weight使用详解
- android真机调试时无法显示logcat信息的解决方法介绍