flutter开发实战-获取屏幕显示大小及物理像素分辨率

flutter开发实战-获取屏幕显示大小及物理像素分辨率

在开发过程中,经常遇到需要获取屏幕显示的大小及物理像素分辨率,这里会用到MediaQuery,MediaQuery必须依赖BuildContext的上下文才能使用。

一、MediaQuery获取屏幕显示大小及物理像素分辨率

flutter中MediaQuery是一个用于获取设备屏幕信息的类。可以用它来获取屏幕宽度、高度、像素密度等信息,以便根据不同的屏幕尺寸进行适配。

例如

dart 复制代码
import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size scrSize = MediaQuery.of(context).size;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MediaQuery示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '屏幕宽度:${scrSize.width}',
              ),
              Text(
                '屏幕高度:${scrSize.height}',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

获取屏幕大小 (逻辑像素分辨率)

dart 复制代码
Size scrSize = MediaQuery.of(context).size;
double screenWidth = scrSize.width;
double screenHeight = scrSize.width;

获取到screenWidth与screenHeight,可要获取物理像素分辨率,我们还需要使用devicePixelRatio。

devicePixelRatio表示表示实际像素与逻辑像素的比例,为double类型。

获取方法

dart 复制代码
 double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

通过将屏幕的宽度和高度乘以设备像素比就可以得到物理像素分辨率

dart 复制代码
Size scrSize = MediaQuery.of(context).size;
    double screenWidth = scrSize.width;
    double screenHeight = scrSize.width;
 double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double canvasWidth = screenWidth*devicePixelRatio;
double canvasHeight = screenHeight*devicePixelRatio;
  • 逻辑像素分辨率(Logical Pixel Resolution)

    逻辑像素分辨率是flutter中使用的抽象分辨率。它是与设备的无关的逻辑像素。代表可以通过程序控制使用的虚拟像素,是一个总体的概念。在逻辑像素分辨率下,屏幕的宽高是以逻辑像素进行度量测试的,不考虑实际的无力像素密度。以iphone7为例,手机逻辑分辨率375×667。

  • 物理像素分辨率(Physical Pixel Resolution)

    物理像素分辨率是实际物理设备上可用的像素分辨率,它根据设备的物理像素密度进行测量的。设备像素,或设备分辨率。以iphone7为例,手机分辨率750*1334。

  • 设备像素缩放比(Device Pixel Ratio)

    同一设备上也是固定的,表示设备物理像素与逻辑像素的比例。公式为:逻辑像素 * DPR = 物理像素。如iphone7的 DPR= 750/375 = 2

二、小结

flutter开发实战-获取屏幕显示大小及物理像素分辨率。

学习记录,每天不停进步。

相关推荐
烛阴15 分钟前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
tkevinjd43 分钟前
C++中线程库的基本操作
开发语言·c++
CodeWithMe1 小时前
【C/C++】不同防止头文件重复包含的措施
c语言·开发语言·c++
拉不动的猪1 小时前
JQ常规面试题
前端·javascript·面试
子豪-中国机器人1 小时前
C++ 信息学奥赛总复习题答案解析
开发语言·c++·算法
oioihoii1 小时前
C++11列表初始化:从入门到精通
java·开发语言·c++
zdy12635746881 小时前
python第48天打卡
开发语言·python
whoarethenext1 小时前
使用 C++/OpenCV 创建动态流星雨特效 (实时动画)
开发语言·c++·opencv
AD钙奶-lalala2 小时前
在 macOS 上搭建 Flutter 开发环境
flutter·macos
新中地GIS开发老师2 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学