颤动的屏幕尺寸

Question

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

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

因此,当我将设备切换到新设备时,容器太长并且抛出错误.

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

Answer 1

您可以使用:

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

Answer 2

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

没有上下文：

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-logic-c84710199d62

Answer 3

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

MediaQuery.of(context).size

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

请用：

import 'dart:ui';

window.physicalSize;

Answer 4

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

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

Answer 5

获得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 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 在内的所有设备

希望这会帮助某人