什么是颤动？如何让UI适应不同的屏幕尺寸？

什么是颤振？

Flutter 可以控制屏幕上的任意像素（因为在 Native 开发中，你无法控制状态栏上的像素，但 Flutter 可以控制状态栏，所以你可以控制屏幕上的任意像素）。

本文的重点

既然我们可以控制所有的像素，那么如果我们想要画一个矩形，我们可以这样画：

Container(
 height: 40,
 width: 60,
),
复制代码

现在，我们使用Container来实现一个40 * 60的矩形，接下来看看矩形在 iPhone 5s（4 英寸显示屏）和 iPhone XS Max（6.46 英寸显示屏）上的样子：

如上所示，您已经注意到 iPhone 上的矩形较小Xs Max 比 iPhone 上的要好。 5秒。

这是因为在 Flutter 中，无论你的应用程序运行在 iPhone 5s、iPhone Xs Max 还是 13 内存的 iPad 上，矩形的大小始终是 40 x 60。

那么如何解决这个问题？

首先，为了更容易理解，我们先用视图来解释一下如何解决这个问题。一旦我们知道了这一点，我们就可以编写代码了。

首先，删除空白视图，然后添加一个框，如下所示：

接下来，我们将框单元格更改为“Block”。

最后，我们使用'Blocks'来划分矩形的宽度和高度，然后使用'Blocks'来表示视图大小。假设宽度和高度分为100分。这样我们就可以在每个视图尺寸上拥有一致的 UI。

代码实现

创建一个新的Dart文件size_config.dart，并在该文件中定义SizeConfig类。

import ‘package:flutter/widgets.dart’;
 
class SizeConfig {}
复制代码

为了在 Flutter 中使用 MediaQueryData 类，MediaQueryData 包含当前设备的屏幕尺寸信息。

然后在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;
 }
}
复制代码

然后我们需要在主屏幕上初始化SizeConfig。

class HomeScreen extends StatelessWidget {
 @override
 Widget 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 开发经验，您可能已经处理过诸如刘海、状态栏、导航栏等问题。

Flutter 中有一个非常方便的 Widget 可以处理这个问题，称为“SafeArea”。

如何在我们的网格方法中实现SafeArea功能

我们需要向SizeConfig添加更多属性来计算SafeArea应占据并从网格中移除的空间。

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;
 }
}
复制代码

这使您可以有效地调整您的 UI，而无需担心 SafaArea。

如何改编文字？

您可以使用相同的网格方法来更改文本。我通常使用 SizeConfig.safeBlockHorizo​​ntal 来更改文本，但您可以使用 SizeConfig.blockSizeVertical 来更改它。

适配后效果如下：

作者：Xiaode_REN
链接：https://juejin.im/post/5d1626a15188255d6c21e806♶作者财产。商业转载请联系作者获取授权。非商业转载请注明出处。