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

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

相关推荐
renxhui13 分钟前
Flutter: go_router 入门
flutter
dangdang___go13 分钟前
文件操作c语言
c语言·开发语言
卓码软件测评14 分钟前
第三方软件检测机构:【利用测试工具Postman测试沙箱:在Tests标签中编写健壮的质量检查逻辑测试脚本】
javascript·node.js·postman
塔能物联运维16 分钟前
设备断网时数据丢失,后来启用本地缓存+异步重传队列
java·开发语言·缓存
kirk_wang24 分钟前
Flutter三方库鸿蒙适配实战:从原理到落地
flutter·移动开发·跨平台·arkts·鸿蒙
小a彤24 分钟前
Flutter 跨平台开发框架详解
flutter
天涯路s30 分钟前
qt怎么自定义日志
开发语言·qt
谎言西西里32 分钟前
彻底搞懂 JavaScript 的 this:从陷阱到解决方案
javascript
Evand J35 分钟前
【自适应IMM】MATLAB编写的创新多模型,基于CA/CT双模型和观测自适应。二维平面目标位置估计,带误差统计特性输出,附代码下载链接
开发语言·matlab·ekf·imm·交互式多模型
我命由我1234538 分钟前
微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)
开发语言·前端·javascript·微信小程序·小程序·前端框架·js