FlutterFlutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )(代码片

Posted 2021-09-16 韩曙亮

文章目录

• 一、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 手机中 , 使用如下代码 , 显示的内容 , 顶部没有预留足够的安全区域 , 导致部分内容

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 最大可适配的宽高比配置 ;

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_screen_adaption">
   <application
        android:label="flutter_screen_adaption"
        android:icon="@mipmap/ic_launcher">

        <!-- 添加 Android 可以适配的最大宽高比为 2.5 : 1 , 适配全面屏添加 -->
        <meta-data
            android:name="android.max_aspect"
            android:value="2.5"/>
    </application>
</manifest>

六、使用 SafeArea 进行全面屏适配

---

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 进行全面屏适配

---

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