| 【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | 您所在的位置：网站首页 › 全面屏图片怎么做 › 【Flutter】Flutter 全面屏适配 ( 需要适配的情况 |
【Flutter】Flutter 全面屏适配 ( 需要适配的情况
|
文章目录一、Flutter 全面屏适配二、全面屏适配的情况三、全面屏适配方法四、反面示例 ( 留海遮挡内容 )五、Android 中配置最大宽高比六、使用 SafeArea 进行全面屏适配七、使用 MediaQuery 进行全面屏适配八、博客资源一、Flutter 全面屏适配 传统的 Android 屏幕的宽高比是 16 : 9, 但是当前主流的全面屏手机 , 基本已经都是 19.5:9, 20:9, 21:9的宽高比 , 基本达到了 2:1左右的宽高比 ; 适配全面屏主要是适配比较长的这个边 ; 全面屏适配内容 : 高度适配 : 传统的布局按照 16:9进行布局 , 高度不足 , 如果适配到全屏屏中 , 导致无法填充满整个屏幕 ; 位置适配 : 基于 屏幕 顶部 / 底部 摆放的组件 , 会出现偏移 , 没有按照设计位置摆放 ; 安全区域适配 : 在一些手机中 , 顶部有刘海 , 水滴 等摄像头位置 , 底部有话筒 , 这些位置不能填充组件 , 有被阻挡的风险 ; 二、全面屏适配的情况全面屏适配要点 : 在页面中使用了 Scaffold 的 appBar 和 bottomNavigationBar , Scaffold 框架会自动按照全面屏的机制进行适配 , 不需要开发者进行手动干预 ;如果页面中没有使用 Scaffold , 或者使用了 Scaffold 没有使用 appBar 和 bottomNavigationBar , 这样顶部导航栏偏上 , 底部导航栏偏下 , 这里需要适配一下 ;三、全面屏适配方法全面屏适配方法 : 在 顶部 和 底部 留出足够的 安全区域 ; 方案一 : Flutter 中提供了一个 SafeArea 组件 , 使用该组件 包裹 页面 , 可以实现适配 ; 方案二 : 使用 MediaQuery.of(context).padding 获取屏幕四个方向上的 Padding ; 四、反面示例 ( 留海遮挡内容 )华为 Mate 30 手机中 , 使用如下代码 , 显示的内容 , 顶部没有预留足够的安全区域 , 导致部分内容 代码语言：javascript复制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 最大可适配的宽高比配置 ; 代码语言：javascript复制 六、使用 SafeArea 进行全面屏适配代码语言：javascript复制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 进行全面屏适配代码语言：javascript复制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 |
【本文地址】
公司简介
联系我们