这是[Flutter问题系列第73号]。如果您觉得有用的话,请参阅栏目。

一：问题描述

随着移动设备越来越多样化,特别是有五或八个屏幕的Android手机,屏幕调整变得越来越复杂。

那么,如何调整屏幕在Flotter中不同的分辨率?

首先,让我们谈一下屏幕如何适应,如何摆脱杂乱,如何简单,如果它有用的话,让我们看看最后的分析。

二：解决方案

这里用到 pub 上的第三方插件库 flutter_screenutil ，截止到发文插件已经更新到了 5.5.3+2。

因为我一直用的是 5.0.0+2 版本，挺稳定的，所以后面将以 5.0.0+2 版本为例说明 flutter_screenutil 插件如何使用。

2-1:引入和获取可靠性

在项目的配置文件pubspec.yaml介绍下图所示的依赖性

然后在终端执行flutter pub get命令获取依赖。

2-2：初始化插件

为了方便后续工作,我们定义了util的文件夹，新建一个rpx.dart文件,然后在该文件中启动插件。

代码如下所示

在这里,您可以很容易地 globally调用rpx设备(以前使用的静态类每次都很难使用)

注:关于为什么它被命名为rpx和为什么它被设计为375x667,请在末尾解释。

有一个方法来启动插件。你叫它在哪里?main.dart中，并且在加载MaterialApp之前进行初始化

代码如下所示

准备工作已经完成,下一步是如何使用它。

2-3:如何使用插件

使用起来非常的简单，只需要把要设置的数字直接当作参数传给 rpx 即可，比如设计稿给的盒子宽是 150 ，那你就直接把 150 填进去即可。

下面举例说明。

例一：设置字体大小

例2:设置框大小,内边界和外边界

在其他情况下, 让我们往前往后走. 使用它真的方便 吗?

5.5.修改和调整3+2版本

我下载了5, too.5.3+2版本的插件,与当前代码相比,仅通过从BoxConstraints到BuildContext更改参数类型来初始化插件,修改后的代码如下

因此,在引用initScreenUtil时,必须修改参数类型。

现在你可以在Flotter应用程序中调整屏幕,如果你对它的原理感兴趣的话,你可以继续往下看。

3:屏幕调整原则及RPx解释说明

①：原理

已知Flatter_screenutil插件的源代码。对于不同的设备,仅须按比例调整和缩小原图的大小。原则是

开发尺寸/原型尺寸=实际屏幕宽度/原型屏幕宽度

②：什么是 rpx

rpx单元是维Chat小程序中CSS的大小单元,rpx可根据屏幕宽度调整,规定屏幕宽度为750rpx,

具体地说,你可以在WeChat小程序中点击查看rpx的解释。

浮动器的单元

我们知道在 Android 中常用的单位有 px、dp、sp 等，在 iOS 中是以 pt（point）为单位，在 Flutter 中的单位是什么呢？

Flutter 的单位使用的类似于 iOS 中的 pt，像我们平常所说的 iphone6 的尺寸是 375x667，但其实它的分辨率是 750x1334。

4:rpx和px之间的替代关系

换句话说,rpx和px有这种关系

• 1rpx = 0.5px = 1物理像素
• 1px = 1物理像素 = 2rpx

这就是为什么我们要用375x667而不是750x1334开始。

5:为什么不使用rpx转换单位?

这里是其他设备的转换关系的缩影

由于设计通常是双重的,我们可以直接转换rpx单元而不需进行二次转换。

这也是为什么我们能够将原始图像的尺寸直接写入内capsulated rpx方法的参数。

到目前为止,没有完美的屏幕匹配方案,我们只能尽力做到完美,因此这要求我们非常注意可能的溢出和布局问题(Flutter还提供适应性组件,如SafeArea、Extended等)。

下面是如何在Flutter应用程序中进行屏幕调整。

我想我有两个小时写信,但我不知道现在是下午1点22分。

你的问题已经解决了吗?欢迎在评论区留下一个消息。

给你一朵玫瑰,你有余的香气,如果你觉得这篇文章不错,我希望你能给你一键三弦,谢谢。

结束语

Google 的 Flutter 越来越火，截止 2022年7月8日 GitHub 标星已达 142K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

不管你是初学者还是已经到门口了,不妨先点个关注，随后我会写在Flutter中常见的组件(包含源分析、组件使用和注释)以及在CSDN博客中遇到的可能问题,尽管希望自己学习,它也可以帮助更多的人。