Flutter如何获取分辨率

在Flutter中,你可以使用MediaQuery来获取屏幕的分辨率和实际画布的分辨率。

要获取屏幕的分辨率,你可以使用MediaQuery.of(context).size属性,它返回一个Size对象,其中包含屏幕的宽度和高度。下面是一个获取屏幕分辨率的例子:

Size screenSize = MediaQuery.of(context).size;
double screenWidth = screenSize.width;
double screenHeight = screenSize.height;

要获取实际画布的分辨率,你可以使用MediaQuery.of(context).devicePixelRatio属性,它返回一个double值,表示实际像素与逻辑像素的比例。通过将屏幕的宽度和高度乘以设备像素比,你可以获得实际画布的分辨率。下面是一个获取实际画布分辨率的例子:

dart

Size screenSize = MediaQuery.of(context).size;
double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double canvasWidth = screenSize.width * devicePixelRatio;
double canvasHeight = screenSize.height * devicePixelRatio;

请注意,MediaQuery需要在具有有效BuildContext的上下文中使用,例如在build方法中使用或在initState方法中使用。如果你在build方法之外的地方使用MediaQuery,你需要确保提供一个有效的BuildContext。

需要注意的是,获取的分辨率是逻辑像素分辨率和实际画布分辨率,并不 是指物理设备的硬件分辨率。

    debugPrint('screen size: ${MediaQuery.of(context).size.width},${MediaQuery.of(context).size.height},${MediaQuery.of(context).devicePixelRatio}');

打印结果如下:

image.png

逻辑像素分辨率和实际画布分辨率

逻辑像素分辨率和实际画布分辨率是Flutter中涉及屏幕显示的两个重要概念。

逻辑像素分辨率(

逻辑像素分辨率(Logical Pixel Resolution):逻辑像素分辨率是Flutter应用程序使用的抽象分辨率,它是与设备独立的,并且以逻辑像素为单位进行度量。在逻辑像素分辨率下,屏幕的宽度和高度是以逻辑像素为单位进行测量的,不考虑实际的物理像素密度。

实际画布分辨率

实际画布分辨率(Physical Pixel Resolution):实际画布分辨率是实际物理设备上可用的像素分辨率,它是根据设备的物理像素密度进行测量的。在实际画布分辨率下,屏幕的宽度和高度是以实际物理像素为单位进行测量的。

逻辑像素分辨率和实际画布分辨率之间的关系是通过设备像素比(Device Pixel Ratio)来确定的。设备像素比是逻辑像素与实际物理像素之间的比例关系。例如,如果设备像素比为2.0,则逻辑像素分辨率和实际画布分辨率之间的关系为1个逻辑像素对应2个实际物理像素。

在Flutter中,通过MediaQuery可以获取到逻辑像素分辨率(MediaQuery.of(context).size)和设备像素比(MediaQuery.of(context).devicePixelRatio)。通过将逻辑像素分辨率乘以设备像素比,就可以得到实际画布分辨率。

理解逻辑像素分辨率和实际画布分辨率的概念可以帮助我们在开发Flutter应用程序时正确处理屏幕的尺寸和布局,以便在不同设备上获得一致的显示效果。

image.png 上面的例子中,打印出来的逻辑像素分辨率是1280X720;设备像素比是1.5,那么实际的物理像素分辨率就是12801.5X7201.5 为1920X1080.