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开发实战-获取屏幕显示大小及物理像素分辨率。

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

相关推荐
新诺韦尔API1 分钟前
车架号查询接口对接全流程详解
大数据·开发语言·python·api
梦6501 分钟前
Vue 中 v-for 与 v-if 优先级
前端·javascript·vue.js
移幻漂流2 分钟前
Kotlin 完全取代 Java:一场渐进式的技术革命(技术、成本与综合评估)
java·开发语言·kotlin
2501_930707783 分钟前
使用C#代码在 Word 文档页面中添加装订线
开发语言·c#·word
WF_YL5 分钟前
极光推送(JPush)快速上手教程(Java 后端 + 全平台适配)
java·开发语言
AI_零食6 分钟前
红蓝之辨:基于 Flutter 的动静脉血动力学可视化系统开发
flutter·ui·华为·harmonyos·鸿蒙
一路往蓝-Anbo6 分钟前
【第48期】:嵌入式工程师的自我修养与进阶之路
开发语言·网络·stm32·单片机·嵌入式硬件
郝学胜-神的一滴7 分钟前
深入理解网络分层模型:数据封包与解包全解析
linux·开发语言·网络·程序人生·算法
程序小馆8 分钟前
Qt cmake add_subdirectory 后无法使用子模块的资源(如图片、翻译文件)的解决方案
开发语言·qt
派大鑫wink9 分钟前
【Day42】SpringMVC 入门:DispatcherServlet 与请求映射
java·开发语言·mvc