Question

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

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

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

我如何制作它以便应用程序针对所有屏幕进行优化？

Answer 1

以下代码有时无法返回正确的屏幕尺寸：

MediaQuery.of(context).size

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

请使用：

import 'dart:ui';

window.physicalSize;

Answer 2

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

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

Answer 3

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

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

是的，flutter_screenutil plugin可用于调整屏幕和字体大小。让您的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),
            ),

请参阅更新后的documentation以获取更多信息

注意：我测试并使用了此插件，该插件在包括iPad在内的所有设备上都非常有效

希望这会对某人有所帮助

Answer 4

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

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 5

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

没有上下文：

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 6

获取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).padding;
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 7

如何在抖动中访问屏幕尺寸或像素密度或宽高比？

我们可以访问屏幕尺寸以及其他类似像素密度，宽高比等。借助MediaQuery。

syntex：MediaQuery.of（context）.size.height

Answer 8

只需声明一个函数

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

使用方式如下

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

Answer 9

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

在这里，我们有一个小的Screen帮助程序类，可用于所有新项目中：

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;

更多信息，请参见：https://blog.gskinner.com/archives/2020/03/flutter-simplify-platform-detection-responsive-sizing.html

Answer 10

注意：我不是在谈论 screen util 包。这里的每个答案都部分正确，即它们都给了你尺寸，但这个尺寸不是你的物理屏幕尺寸，而是你的应用程序占用的尺寸。

现在，有什么区别，为什么这很重要？这在 Android 和 iOS 应用程序中无关紧要，因为它们不是自由格式应用程序（我不知道 android 自由格式的结果如何，所以现在是例外），但它在桌面和网络中最重要。我在 windows 和 web 中尝试过这个，在平台 MediaQuery 以及 WidgetsBinding.instance.window.physicalSize 返回应用程序占用的大小。这是非常无用的，因为我想制作一个响应式 UI。

Answer 11

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

澄清一下，我可能应该要求的是 Expanded 小部件，因为我相信（对我尝试实现的目标记忆模糊）我希望将 ListView 作为 Column 的子项之一。我不应该使用特定的屏幕尺寸来将 ListView 放入列中，而是应该优化最大可用空间，因此将 ListView 包装在 Expanded 中会产生预期的效果。

MediaQuery 很棒，但我只尝试使用它来破译屏幕使用 Material 断点的形状因子，否则我尝试尽可能多地使用 Expanded/Spacer 小部件，BoxConstaints 位于最小/最大尺寸，还需要考虑使用 SafeArea 小部件实际可用的最大空间以避免缺口/导航栏，

颤动的屏幕尺寸

11 个答案: