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

2024 年 6 月 23 日 22点热度 0人点赞 0条评论

这篇文章是关于什么的？

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

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。