如何确定屏幕高度和宽度

Question

我在 Flutter 上创建了一个新应用程序，在不同设备之间切换时遇到了屏幕尺寸问题。

我使用 Pixel 2XL 屏幕尺寸创建了应用程序，因为我的容器有一个ListView的孩子，所以要求我包含容器的高度和宽度。

因此，当我将设备切换到新设备时，容器太长并引发错误。

我怎样才能使应用程序针对所有屏幕进行优化？

Answer 1

您可以使用：

• double width = MediaQuery.of(context).size.width;
• double height = MediaQuery.of(context).size.height;

要仅获得安全区域的高度(适用于 iOS 11 及更高版本)：

• var padding = MediaQuery.of(context).padding;
• double newheight = height - padding.top - padding.bottom;

Answer 2

更新

3.7.0+

• 没有BuildContext：

  // First get the FlutterView.
  FlutterView view = WidgetsBinding.instance.platformDispatcher.views.first;
  // Dimensions in physical pixels (px)
  Size size = view.physicalSize;
  double width = size.width;
  double height = size.height;
  // Dimensions in logical pixels (dp)
  Size size = view.physicalSize / view.devicePixelRatio;
  double width = size.width;
  double height = size.height;
  

• BuildContext：

  // Dimensions in logical pixels (dp)
  Size size = MediaQuery.of(context).size;
  double width = size.width;
  double height = size.height;
  // Height (without SafeArea)
  final padding = MediaQuery.of(context).viewPadding;
  double height1 = height - padding.top - padding.bottom;
  // Height (without status bar)
  double height2 = height - padding.top;
  // Height (without status and toolbar)
  double height3 = height - padding.top - kToolbarHeight;
  // To get above dimensions in physical pixels (px), 
  // multiply them by `MediaQuery.of(context).devicePixelRatio`
  

Answer 3

为了澄清和详细说明未来的研究人员的确切解决方案：

没有上下文：

import 'dart:ui';
var pixelRatio = window.devicePixelRatio;
//Size in physical pixels
var physicalScreenSize = window.physicalSize;
var physicalWidth = physicalScreenSize.width;
var physicalHeight = physicalScreenSize.height;
//Size in logical pixels
var logicalScreenSize = window.physicalSize / pixelRatio;
var logicalWidth = logicalScreenSize.width;
var logicalHeight = logicalScreenSize.height;
//Padding in physical pixels
var padding = window.padding;
//Safe area paddings in logical pixels
var paddingLeft = window.padding.left / window.devicePixelRatio;
var paddingRight = window.padding.right / window.devicePixelRatio;
var paddingTop = window.padding.top / window.devicePixelRatio;
var paddingBottom = window.padding.bottom / window.devicePixelRatio;
//Safe area in logical pixels
var safeWidth = logicalWidth - paddingLeft - paddingRight;
var safeHeight = logicalHeight - paddingTop - paddingBottom;

有上下文：

//In logical pixels
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
var padding = MediaQuery.of(context).padding;
var safeHeight = height - padding.top - padding.bottom;

有关物理和逻辑像素的额外信息，适合好奇的人： https://blog.specctr.com/pixels-physical-vs-logical-c84710199d62

Answer 4

下面的代码有时不会返回正确的屏幕大小：

MediaQuery.of(context).size

我在三星SM-T580上进行了测试，它返回{width: 685.7, height: 1097.1}而不是真正的分辨率1920x1080。

请使用：

import 'dart:ui';
window.physicalSize;

Answer 5

使用以下方法，我们可以获取设备的物理高度。 例如 1080X1920

WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width

Answer 6

MediaQuery.of(context).size.width和MediaQuery.of(context).size.height效果很好，但每次都需要编写 width/20 等表达式来设置特定的高度宽度。

我在 Flutter 上创建了一个新应用程序，在不同设备之间切换时遇到了屏幕尺寸问题。

是的，flutter_screenutil插件可用于调整屏幕和字体大小。让您的UI在不同的屏幕尺寸上显示合理的布局！

用法：

添加依赖项：

请在安装前检查最新版本。

dependencies:
flutter:
sdk: flutter
# add flutter_ScreenUtil
flutter_screenutil: ^0.4.2

将以下导入添加到 Dart 代码中：

import 'package:flutter_screenutil/flutter_screenutil.dart';

初始化并设置适合大小和字体大小，以根据系统的"字体大小"辅助功能选项进行缩放

//fill in the screen size of the device in the design
//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil()..init(context);
//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
//If you wang to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

用：

//for example:
//rectangle
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
...
),
////If you want to display a square:
Container(
width: ScreenUtil().setWidth(300),
height: ScreenUtil().setWidth(300),
),

有关更多详细信息，请参阅更新的文档

注意：我测试并使用此插件，它确实适用于包括iPad在内的所有设备

希望这会帮助某人

Answer 7

嘿，您可以使用此类来获取屏幕宽度和高度的百分比

import 'package:flutter/material.dart';
class Responsive{
static width(double p,BuildContext context)
{
return MediaQuery.of(context).size.width*(p/100);
}
static height(double p,BuildContext context)
{
return MediaQuery.of(context).size.height*(p/100);
}
}

并像这样使用

Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);

Answer 8

最初我也陷入了这个问题。 然后我知道，对于移动设备，我们使用MediaQuery.of(context).size.height获得确切的屏幕高度，但对于网络，我们不会使用这种方法，所以我使用了dart.html库中的window.screen.height然后我还添加了我们可以通过进行一些计算在 web 中使用的最大屏幕尺寸......

import 'dart:html';
getViewHeight =>
window.screen!.height! *
((window.screen!.height! -
kToolbarHeight -
kBottomNavigationBarHeight -
120) /
window.screen!.height!);

kIsWeb
? getViewHeight
: MediaQuery.of(context).size.height * 0.7)

通过使用这种方法，我们可以动态地获得最大可用屏幕尺寸。

Answer 9

如何在颤振中访问屏幕尺寸或像素密度或纵横比？

我们可以访问屏幕尺寸和其他像素密度，宽高比等。 在MediaQuery的帮助下。

syntex ： MediaQuery.of(context).size.height

Answer 10

只需声明一个函数

Size screenSize() {
return MediaQuery.of(context).size;
}

像下面这样使用

return Container(
width: screenSize().width,
height: screenSize().height,
child: ...
)

Answer 11

有点晚了，因为我在大约 2 年前问过这个问题，当时还是个新手，但感谢大家的回复，因为当时学习这是一个巨大的帮助。

澄清一下，我可能应该要求一个扩展小部件，因为我相信(对我试图实现的目标的模糊记忆)我希望将 ListView 作为列的子项之一。我应该寻求优化最大可用空间，而不是使用特定的屏幕大小来适应列中的此 ListView，因此将 ListView 包装在扩展中会产生预期的影响。

MediaQuery 很棒，但我尝试只使用它来破译屏幕使用材质断点的外形规格，否则我尝试尽可能多地使用扩展/间隔小部件，最小/最大尺寸的 BoxConstaints，还需要考虑使用 SafeArea 小部件实际可用的最大空间以避免凹口/导航栏，

Answer 12

import 'dart:ui';
var pixelRatio = window.devicePixelRatio;
//Size in physical pixels
var physicalScreenSize = window.physicalSize;`

很好，问题是当你为 --release 构建时它不起作用。 原因是 Size 在应用程序启动时为零，因此如果代码很快，则 phisicalSize 的值为 (0.0， 0.0)。

你找到解决方案了吗？

Answer 13

我最初从 MediaQuery 中获取大小以备不时之需，然后设置一个 Future 在 500 毫秒内运行以再次获取它。第二次尝试是正确的。我的应用程序是一个以菜单开头的游戏，所以如果大小有点偏差，那也没关系。

Answer 14

将帮助程序文件名命名为

responsive_helper.飞镖

import 'package:flutter/material.dart';
class ResponsiveHelper {
static double getDeviceWidth(BuildContext context) {
return MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio;
}
static double getDeviceHeight(BuildContext context) {
// Add Additional or Customize To Get Accurate Height
return MediaQuery.of(context).size.height * MediaQuery.of(context).devicePixelRatio + kToolbarHeight + kBottomNavigationBarHeight;
}
}

然后你可以像这样使用它

double deviceWidth = ResponsiveHelper.getDeviceWidth(context);
if (deviceWidth <= 320) {

} else if (deviceWidth >= 321) {

}

等等