概要：
1.全屏幕特色，及存在的问题；
2.适配IOS全屏iPhone X；
3.适配Android 全面屏
总结：
全屏幕特点，以及存在的问题
特点：
1、大、屏占比高、长宽比不再是比16:9 ，达到了19.5：9甚至更高；
2、短边的像素，density的取值都是一样的，所以需要适配的是长边；
问题：
1.传统布局的高度不足，导致上下留黑边
2.甚至屏幕顶部或底部的布局，如弹框，会在全面屏手机上发生位移
页面适配
全面屏的页面适配分两种情况：
1.一种是对于页面已经使用了Scaffold的appBar与bottomNavigationBar的页面是不需要额外适配的，因为Scaffold框架会自动帮我们完成这些适配工作
2.另外一种情况，在很多页面没有用到Scaffold或者Scaffold的appBar与bottomNavigationBar,那么该如何适配全面屏呢？
对于这种情况要适配全面屏需要知道以下要点：
适配要点：
1.顶部NavigationBar上部预留安全区域；
2.底部NavigationBar 底部预留安全区域；
对于安全区域的适配有两种方案：
方案一：采用SafeArea来包裹页面，SafeArea是Flutter中的一个用于适配全面屏的组件，它类似于RN中SafeAreaView主要是用于解决适配全面屏手机的安全区域的问题；
优缺点：相对简单，只需要引入SafeArea，但不够灵活。
方案二：借助MediaQuery.of(context).padding获取屏幕四周的Padding，然后根据Padding自己实现对安全区域的控制；
优缺点：需要借助MediaQuery.of(context).padding自己实现对安全区域的控制，相对复杂些，但灵活度比较高
具体使用方法：
效果图：
代码：（自己写的具体例子）
import 'package:flutter/material.dart';
///
/// 全面屏适配 ios 可以通过以下两种方式（选择其中一种）进行适配，
/// android 以下也适用但是还需要在android 清单文件AndroidManifest.xml进行配置
/// <!--设置全面屏-->
/// <meta-data
/// android:name="android.max_aspect"
/// android:value="2.3" />
///
class ScreenPageextends StatefulWidget {
@override
_ScreenPageStatecreateState() =>_ScreenPageState();
}
class _ScreenPageStateextends State {
@override
Widgetbuild(BuildContext context) {
return _mediaQuery();
}
///方法一，借助SafeArea 来完成
_safeArea(){
return MaterialApp(
title:'全面屏适配',
theme:ThemeData(primarySwatch: Colors.blue),
home:Container(
decoration:BoxDecoration(color: Colors.white),
child:SafeArea(
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("顶部"),
Text('底部'),
],
),
),
),
);
}
///方法二，通过MediaQuery 实现
_mediaQuery(){
final EdgeInsets padding = MediaQuery.of(context).padding;
return MaterialApp(
title:'全面屏适配',
theme:ThemeData(primarySwatch: Colors.blue),
home:Container(
padding:EdgeInsets.fromLTRB(0, padding.top,0,padding.bottom),
decoration:BoxDecoration(color: Colors.white),
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("顶部"),
Text('底部'),
],
),
),
);
}
}
网友评论