flutter 适配Android ios全面屏

1 篇文章 0 订阅
1 篇文章 0 订阅

起因: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等;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值