什么Flutter？
阅读这文章的时候，你可能已经对Flutter是什么有了足够的理解，在阅读这篇文章时你必须记住的最重要的方面是，Flutter允许我们完全控制每个像素显示在屏幕上。
这篇文章是关于什么的？
由于我们可以完全控制所有像素，因此我们可能需要绘制一个这样的矩形。
Container(
height: 40,
width: 60,
),
很好！我们有一个矩形，但现在，看看如果我们在iPhone 5s（4''）和iPhone XS Max（6,46''）上显示它会发生什么。
您可能从上面的图像中看到，iPhone Xs Max上显示的矩形比iPhone 5s上显示的矩形小。
那是因为Flutter不会质疑该应用程序是在iPhone 5s，iPhone Xs Max还是13英寸iPad上运行，容器总是40 x 60。
我明白了，但我该怎么办呢？
让我们首先以可视方式解决问题，然后，一旦清楚，我们就会得到代码。
让我们看一个空视图然后添加一个网格。
现在，我们将把网格的单元格称为“ 块 ”
最后，我们使用块设置矩形的高度和宽度。这将使我们能够在iPhone 5s到iPad的每个显示尺寸上拥有一致的UI，因为对于这两者，我们将拥有100 x 100网格。
让我们来看看代码实现吧！
开始创建一个名为“size_config.dart”的新dart文件，定义SizeConfig类。
import ‘package:flutter/widgets.dart’;
class SizeConfig {}
我们需要导入'widgets.dart'，以便在Flutter中使用一个非常方便的类MediaQueryData，它保存当前媒体的信息，其中包括我们屏幕的大小。
现在让我们定义我们将在这个类中使用的属性。
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;
}
}
剩下要做的就是在主屏幕中实例化这个对象。
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
…
}
}
最后用它来设置容器的宽度和高度。
@override
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开发人员，您可能已经处notches, status bars, navigation bars和所有这些stuff。
有一个非常方便的小部件可以有效地处理这些小部件，它被称为“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而无需担心SafeArea。
缩放文字怎么样？
事实证明，您可以使用这个相同的网格来缩放文本，我通常使用SizeConfig.safeBlockHorizontal进行缩放，但您也可以使用垂直网格进行缩放。
这是它的样子。
GitHub链接为本文中显示的代码
我在本文中提供的所有代码以及如何使用它的示例都可以在
https://github.com/dancamdev/effectively_scale_UI_according_to_different_screen_sizes
结论
所以，这是我的第一篇文章。我希望你喜欢这篇文章，最重要的是，我希望你用你在这里学到的东西来制作很多很棒的，规模很大的应用程序！
网友评论