如何确定屏幕高度和宽度

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

我使用 Pixel 2XL 屏幕大小创建了这个应用程序，因为我有一个子 ListView的容器，它要求我包含容器的高度和宽度。

因此，当我切换设备到一个新的设备容器太长，并抛出一个错误。

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

242297 次浏览
小开
最佳答案

你可使用:

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

要获得 安全区的高度(适用于 iOS11及以上版本) :

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

MediaQuery.of(context).size.width和 MediaQuery.of(context).size.height工作得很好，但是每次都需要写宽度/20这样的表达式来设置特定的高度宽度。

我已经创建了一个新的应用程序的颤振，我有问题的屏幕大小时，切换不同的设备。

是的，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 在内的所有设备上都非常好用

希望这能帮到别人

小开

获得 ABC0是容易的，但 height可能是棘手的，下面是处理 height的方法

// Full screen width and height
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;


// Height (without SafeArea)
var 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;
小开

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

MediaQuery.of(context).size

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

请使用:

import 'dart:ui';


window.physicalSize;
小开

嘿，你可以使用这个类得到屏幕宽度和高度的百分比

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),);
小开

如何访问屏幕尺寸或像素密度或长宽比颤动？

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

Syntex: MediaQuery.of (context) . size.height

小开

只需声明一个函数

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

使用如下

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

使用以下方法，我们可以得到设备的物理高度。 练习1080X1920

WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width
小开

大约两年前我问过这个问题，当时我还是个新手，有点晚了，但是谢谢大家的回答，因为当时我知道这是一个巨大的帮助。

为了澄清，我可能应该要求的是一个扩展的小部件，因为我相信(模糊的记忆，我正在努力实现) ，我希望有一个 ListView 作为一个专栏的孩子之一。我本应该优化可用的最大空间，而不是使用特定的屏幕大小来适应 Column 中的 ListView，因此，将 ListView 包装在 Expded 中会产生预期的效果。

MediaQuery 很棒，但是我只是用它来破译屏幕上使用的材质断点的形状因子，否则我会尽可能多地使用展开/间隔小部件，在最小/最大尺寸下使用 BoxConstats，还需要考虑使用 SafeArea 小部件实际可用的最大空间，以避免出现刻痕/导航条,

小开

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

没有上下文:

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

小开 
 import 'dart:ui';


var pixelRatio = window.devicePixelRatio;


//Size in physical pixels
var physicalScreenSize = window.physicalSize;`

非常好，问题是当你构建-释放它不工作。 原因是 Size 在 app start 时为零，因此如果代码很快，phisicalSize 的值就是(0.0.0.0)。

你找到解决办法了吗？


提交答案