Flutter — 根据不同的屏幕尺寸有效缩放 UI

这篇文章是关于什么的?

由于我们可以完全控制所有像素,我们可能想要画一个像这样的矩形。

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。

我明白了,但我该如何解决?

让我们先用视觉的方式来解决问题,然后,一旦清楚了,我们就会进入到代码中。

让我们取一个空视图,然后向它添加一个网格。

现在,我们将把网格的单元称为“

最后,我们使用块设置矩形的高度和宽度。这将允许我们在每一个显示尺寸上都拥有一致的 UI,从 iPhone 5s 到 iPad,因为对于它们来说,我们都将拥有一个 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 开发者,你可能已经处理过刘海、状态栏、导航栏和所有这些东西。

Flutter中有一个非常方便的小部件可以有效地处理这些小部件,它被称为“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/rohanjariwala03/effectively_scale_UI_according_to_different_screen_sizes


原文:https://medium.com/@rohanjariwala03/flutter-effectively-scale-ui-according-to-different-screen-sizes-d2764e833107

作者:Rohan Jariwala

作者:杭州程序员张张

%s 个评论

要回复文章请先登录注册