Flutter —— 根据不同屏幕尺寸高效的适配 UI

Flutter 是什么？

如果你对这篇文章感兴趣的话，说明你已经对 Flutter 有了一定的了解，阅读本篇文章你需要记住的最重要的内容就是，Flutter 是可以控制屏幕上的任何一个像素的（因为在 Native 开发里是不能控制状态栏里的像素的，但 Flutter 可以控制状态栏，所以是可以控制屏幕上的任何一个像素）。

本篇文章的核心

因为可以控制所有的像素，如果我们想画一个矩形，就可以这样实现：

Container(
 height: 40,
 width: 60,
), 

现在，我们就用 Container 实现了一个 40 * 60 的矩形，接下来看一下这个矩形在 iPhone 5s (4" Display) 和 iPhone XS Max (6,46" Display) 显示的样子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8quGCgyz-1629809966946)(https://user-gold-cdn.xitu.io/2019/6/28/16b9eac5a258cc7e?imageView2/0/w/1280/h/960/ignore-error/1)]

如上图，你已经注意到，矩形在 iPhone Xs Max 上比 iPhone 5s 要小。

这是因为 Flutter 不管你的 App 是运行在 iPhone 5s，iPhone Xs Max 或者 13 存的 iPad 上，矩形的大小一直都是 40 x 60。

那么如何解决呢？

首先，为了便于理解，我们先用视图的方式来说明如何解决这个问题，当弄明白了之后，在去写代码。

首先，拿出一个空的 view，然后给他加上网格，如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0VotJf2n-1629809966947)(https://user-gold-cdn.xitu.io/2019/6/29/16b9ed0e98f147f8?imageView2/0/w/1280/h/960/ignore-error/1)]

然后，我们把网格的单元成为 ‘Blocks’。

最终，我们使用 ‘Blocks’ 来划分矩形的宽和高，然后使用 ‘Blocks’ 来代表 view 的大小，假设将宽高都分成 100 分，这样我们就可以在每个显示尺寸上拥有一致的 UI。

编码实现

创建一个新的 Dart 文件 size_config.dart，在这个文件里定义一个 SizeConfig 的类。

import ‘package:flutter/widgets.dart’;
 
class SizeConfig {} 

为了使用 Flutter 里的 MediaQueryData