本文是根据 Daniele Cambi 的文章 Flutter — Effectively scale UI according to different screen sizes 总结而来 ：

文章地址 ：https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a（自备扶梯）

本文核心思想 ：

作者创建一个矩形 ：

Container(

    height: 40,

    width: 60,

)

在iPhone 5s (4" Display) and on an iPhone XS Max (6,46" Display)，

显示效果的差异 ！！！ 如何解决这个问题呢 ？

注： Flutter 使用的 逻辑像素 logical pixels 为单位 ，和 Android的 dp还是不一样

具体 lp 有什么效果，网上也没查到具体资料😢

F351C2BC-3FCC-4159-AB4C-59374D000780.png

如何解决这个问题呢 ？

作者认为可以把屏幕认为是一个 ， 100 * 100 的格子（或者认为水平方向和竖直方向，平均分成100个单位 ，恩 ，是不是就是Android中的百分比布局了）

9826144B-C0BB-4228-BFE4-35E98BCD7D4F.png

作者新建一个帮助类 ：

import ‘package:flutter/widgets.dart’;

class SizeConfig {

static MediaQueryData _mediaQueryData;

static double screenWidth;

static double screenHeight;

static double blockSizeHorizontal;

static double blockSizeVertical;

// 初始化方法

void init(BuildContext context) {

_mediaQueryData = MediaQuery.of(context);

// flutter系统提供的类，可以查询屏幕方向，屏幕宽、高

// 返回的宽、高，单位： dp, 宽高返回的单位是 dp 哦！！！

// 返回屏幕宽高，是随着屏幕旋转，返回值是不一样的 ！！！

screenWidth = _mediaQueryData.size.width;

screenHeight = _mediaQueryData.size.height;

// 屏幕宽高 ，均分 100 份

blockSizeHorizontal = screenWidth / 100;

blockSizeVertical = screenHeight / 100;

    }

}

初始化方法 ：

class HomeScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

    SizeConfig().init(context);

    }
}

使用帮助类来设置widget大小 ：

@override

Widget build(BuildContext context) {

return Center(

child: Container(

     height: SizeConfig.blockSizeVertical * 20,

     width: SizeConfig.blockSizeHorizontal * 50,

     color: Colors.orange,
       ),
   );
}

效果图 ：

6604598D-0E2D-4EA1-868B-56BE6A5F6400.png

---

对异形屏 ，刘海屏，水滴屏等异形屏幕(notches)和状态栏（status bars）、导航栏(navigation bars)的处理

---

在Flutter中有一个非常方便的小部件，可以有效地处理这些问题，它被称为“安全区域”( SafeArea)。

个人理解，flutter , 把 异形屏 ，导航栏相关区域称为 安全区域 。

作者的思想 ：屏幕的长宽去掉安全区域的大小，然后分成 100份 ，算出每一块的单位长度 。

class SizeConfig {

static MediaQueryData _mediaQueryData;

static double screenWidth;

static double screenHeight;

static double blockSizeHorizontal;

static double blockSizeVertical;

static double _safeAreaHorizontal;

static double _safeAreaVertical;

static double safeBlockHorizontal;

static double safeBlockVertical;

void init(BuildContext context) {

_mediaQueryData = MediaQuery.of(context);

screenWidth = _mediaQueryData.size.width;

screenHeight = _mediaQueryData.size.height;

blockSizeHorizontal = screenWidth / 100;

blockSizeVertical = screenHeight / 100;

_safeAreaHorizontal = _mediaQueryData.padding.left +

_mediaQueryData.padding.right;

_safeAreaVertical = _mediaQueryData.padding.top +

_mediaQueryData.padding.bottom;

safeBlockHorizontal = (screenWidth -

_safeAreaHorizontal) / 100;

safeBlockVertical = (screenHeight -

_safeAreaVertical) / 100;

    }

}

---

文字的缩放 ：

我们可以使用 SizeConfig.safeBlockHorizontal or SizeConfig.safeBlockVertical为单位 ，对文字进行缩放 。

image.png

---

如果您已经看到这里，不妨我们深度思考一下 ：

---

真实的软件开发过程，一般是设计人员先设计好设计图 or 设计稿（一般是1080px * 1920px为基准），然后研发人员进行开发

那我们就把屏幕宽和长 ，分成 1080 和 1920 个单位 ，然后按设计图上的标注去填写相应widgets的大小

所以我认为 flutter 非常适合百分比布局（天生适合按比例布局）

而Android 百分比布局，适配工作量非常大，兼容性差

在网上发现了一个开源库 ，原理我觉得差不多，大家可以学习一下

flutter_screenutil

https://github.com/OpenFlutter/flutter_screenutil/

---

如果觉得文章有用，帮忙点个喜欢❤️ ，😘😘😘

---