[译] Flutter —— 根据不同屏幕尺寸高效的适配 UI，Android 插件化入门指南

width: 60,),

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

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

这是因为 Flutter 不管你的 App 是运行在 iPhone 5s，iPhone Xs Max 或者 13 存的 iP

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

ad 上，矩形的大小一直都是 40 x 60。

那么如何解决呢？

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

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

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

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

编码实现

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

import ‘package:flutter/widgets.dart’;

class SizeConfig {}

为了使用 Flutter 里的 MediaQueryData 类，MediaQueryData 里包含当前设备的屏幕尺寸信息，我们需要引入 widgets.dart。

然后在 SizeConfig 里定义如下的属性：

import ‘package:flutter/widgets.dart’;class SizeConfig {static MediaQueryData _mediaQueryData;static double screenWidth;static double screenHeight;static double blockSizeHorizontal;static double blockSizeVertical;}

我们需要写一个构造函数去初始化这些属性：

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);screenWidth = _mediaQueryData.size.width;screenHeight = _mediaQueryData.size.height;blockSizeHorizontal = screenWidth / 100;blockSizeVertical = screenHeight / 100;}}

然后就是要在你的 home screen 里初始化 SizeConfig。

class HomeScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {SizeConfig().init(context);…}}

然后我们就可以使用 SizeConfig 里的属性去定义你的 Container 的宽高。

Widget build(BuildContext context) {return Center(child: Container(height: SizeConfig.blockSizeVertical * 20,width: SizeConfig.blockSizeHorizontal * 50,color: Colors.orange,),);}

最后，在不同的屏幕上，矩形的宽都是屏幕宽的 50%，矩形的高都是屏幕高的 20%。

下面就是矩形显示在 iPhone 5s 和 iPhone XS Max 的样子。

扩展

如果你在 Flutter 开发上已经有了很多经验，你可能已经处理过刘海屏、状态栏、导航栏这些东西。