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

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

相关推荐
光泽雨3 分钟前
c#对object sender ,EventArgs e 的解释
开发语言·c#
绿豆人5 分钟前
go语言的Reflect包
java·开发语言·数据结构
悟空瞎说6 分钟前
从isMounted到跨页面状态:高级前端如何优雅解决订单场景的“幽灵陷阱”(附React/Vue完整代码)
前端·javascript
sheeta199811 分钟前
TypeScript references 配置与 emit 要求详解
javascript·ubuntu·typescript
lolo大魔王14 分钟前
Go语言的函数与指针的定义
开发语言·后端·golang
神の愛15 分钟前
js的深拷贝和浅拷贝?啥情况讲解下??底层堆栈空间??object.prototype.toString.call(),还有bind,的具体使用?
前端·javascript·原型模式
liuyao_xianhui16 分钟前
map和set_C++
java·开发语言·数据结构·c++·算法·宽度优先
香蕉鼠片20 分钟前
八股C++
开发语言·c++
AI视觉网奇21 分钟前
python 截取矩形 缩放,旋转
开发语言·python·numpy
1314lay_100722 分钟前
el-table表格数据分页切片,导致表格的多选失效
javascript·vue.js·elementui