起因:Android和ios最新发布的全面屏手机概览
之前大部分手机屏占比是16:9,但是以上占比达到了19.5:9,所以会让布局高度不足。弹框的位置和安全域也是将要面临的问题,故做以下适配;
ios:
方法1:SafeArea()====》优点:方便;缺点:不灵活(不能自定义上下适配);
import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "适配全面屏",
home: Container(
decoration: BoxDecoration(
color: Colors.blue,
),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"上",
style: TextStyle(color: Colors.red, fontSize: 30),
),
Text(
"下",
style: TextStyle(color: Colors.red, fontSize: 30),
),
],
),
)),
);
}
}
方法二:MediaQuery====》优点:可控制上下适配与否(如不适配其中一项,将其置为0);缺点:相对一麻烦;
import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: "适配全面屏",
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
final EdgeInsets padd = MediaQuery.of(context).padding;
// TODO: implement build
return Container(
padding: EdgeInsets.fromLTRB(0, padd.top, 0, padd.bottom),
decoration: BoxDecoration(
color: Colors.blue,
),
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"上",
style: TextStyle(color: Colors.red, fontSize: 30),
),
Text(
"下",
style: TextStyle(color: Colors.red, fontSize: 30),
),
],
),
));
}
}
Android:
相对于ios的flutter代码相同,区别在于在Android的AndroidManifest文件加上高宽比配置:
<manifest...
<application...
<meta-data
android:name="android.max_aspect"
android:value="2.2"/>
</application>
</manifest>
说明:2.2的来源是19.9/9约为2.16,我们设置这个数值是高宽比的最大值,所以你也可设为2.3等;