flutter 适配Android ios全面屏

flutter 适配Android ios全面屏,第1张

概述起因:Android和ios最新发布的全面屏手机概览之前大部分手机屏占比是16:9,但是以上占比达到了19.5:9,所以会让布局高度不足。d框的位置和安全域也是将要面临的问题,故做以下适配;ios:方法1:SafeArea()====》优点:方便;缺点:不灵活(不能自定义上下适配);import'package:flutter/materia 起因:AndroID和ios最新发布的全面屏手机概览

之前大部分手机屏占比是16:9,但是以上占比达到了19.5:9,所以会让布局高度不足。d框的位置和安全域也是将要面临的问题,故做以下适配;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(          @R_502_3489@: Box@R_502_3489@(            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),        @R_502_3489@: Box@R_502_3489@(          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等; 总结

以上是内存溢出为你收集整理的flutter 适配Android ios全面屏全部内容,希望文章能够帮你解决flutter 适配Android ios全面屏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1114031.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存