如何确定屏幕高度和宽度

Question

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

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

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

我怎样才能让它针对所有屏幕进行优化？

Answer 1

您可以使用：

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

要获得 SafeArea 的高度（对于 iOS 11 岁及以上）：

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

Answer 2

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

I've created a new application on flutter, and I've had problems with the screen sizes when switching between different devices.

是的，flutter_screenutil plugin可用于适配屏幕和字体大小。让你的UI在不同尺寸的屏幕上显示合理的布局！

用法：

添加依赖：

安装前请检查最新版本

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

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

import 'package:flutter_screenutil/flutter_screenutil.dart';

根据系统的"font size"可访问性选项初始化并设置适合大小和字体大小以缩放

//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),
            ),

请参阅更新后的 documentation 了解更多详情

注意： 我测试并使用了这个插件，它真的适用于所有设备，包括 iPad

希望这对某人有所帮助

Answer 3

获得width很容易，但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;

Answer 4

以下代码有时 return 屏幕尺寸不正确：

MediaQuery.of(context).size

我在 SAMSUNG SM-T580 上进行了测试，returns {width: 685.7, height: 1097.1} 而不是实际分辨率 1920x1080。

请使用：

import 'dart:ui';

window.physicalSize;

Answer 5

您好，您可以使用此 class 以百分比形式获取屏幕宽度和高度

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 6

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

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

语法：MediaQuery.of（上下文）。size.height

Answer 7

声明一个函数就可以了

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

像下面这样使用

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

Answer 8

我们注意到使用 MediaQuery class 可能有点麻烦，而且还缺少一些关键信息。

这里我们有一个小屏幕助手 class，我们在所有新项目中使用它：

class Screen {
  static double get _ppi => (Platform.isAndroid || Platform.isIOS)? 150 : 96;
  static bool isLandscape(BuildContext c) => MediaQuery.of(c).orientation == Orientation.landscape;
  //PIXELS
  static Size size(BuildContext c) => MediaQuery.of(c).size;
  static double width(BuildContext c) => size(c).width;
  static double height(BuildContext c) => size(c).height;
  static double diagonal(BuildContext c) {
    Size s = size(c);
    return sqrt((s.width * s.width) + (s.height * s.height));
  }
  //INCHES
  static Size inches(BuildContext c) {
    Size pxSize = size(c);
    return Size(pxSize.width / _ppi, pxSize.height/ _ppi);
  }
  static double widthInches(BuildContext c) => inches(c).width;
  static double heightInches(BuildContext c) => inches(c).height;
  static double diagonalInches(BuildContext c) => diagonal(c) / _ppi;
}

使用

bool isLandscape = Screen.isLandscape(context)
bool isLargePhone = Screen.diagonal(context) > 720;
bool isTablet = Screen.diagonalInches(context) >= 7;
bool isNarrow = Screen.widthInches(context) < 3.5;

Answer 9

使用下面的方法我们可以得到设备的物理高度。前任。 1080X1920

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

Answer 10

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

为了澄清，我可能应该要求的是扩展小部件，因为我相信（我试图实现的模糊记忆）我希望有一个 ListView 作为 Column 的子项之一.与其使用特定的屏幕尺寸来适应 Column 中的这个 ListView，我应该一直在寻求优化最大可用 space，因此将 ListView 包装在 Expanded 中会产生预期的效果。

MediaQuery 很棒，但我只尝试使用它来破译屏幕使用 Material 断点的外形因素，否则我会尝试尽可能多地使用 Expanded/Spacer 小部件，在 minimum/max 大小的 BoxConstants 中，还需要考虑使用 SafeArea 小部件实际可用的最大值 space 以避免 notches/navigation 栏，

Answer 11

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

没有上下文：

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;

Extra info about physical and logical pixels for the curious: https://blog.specctr.com/pixels-physical-vs-logical-c84710199d62

如何确定屏幕高度和宽度

How to Determine Screen Height and Width

height

width

screen-size

dart

flutter