Práctica de desarrollo de Flutter: obtenga el tamaño de visualización de la pantalla y la resolución de píxeles físicos

Durante el proceso de desarrollo, a menudo se encuentra que es necesario obtener el tamaño y la resolución física de píxeles de la pantalla. Aquí se usará MediaQuery, y MediaQuery debe confiar en el contexto de BuildContext para usarlo.

1. MediaQuery obtiene el tamaño de visualización de la pantalla y la resolución física de píxeles.

MediaQuery en flutter es una clase que se utiliza para obtener información de la pantalla del dispositivo. Se puede utilizar para obtener información como ancho, alto, densidad de píxeles, etc. de la pantalla, para adaptarse a diferentes tamaños de pantalla.

Por ejemplo

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}',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Obtener el tamaño de la pantalla (resolución lógica de píxeles)

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

Obtenga el ancho de pantalla y el alto de pantalla, pero para obtener la resolución física de píxeles, también necesitamos usar devicePixelRatio.
devicePixelRatio indica la proporción entre píxeles reales y píxeles lógicos y es de tipo doble.

método de acceso

 double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

La resolución de píxeles físicos se puede obtener multiplicando el ancho y el alto de la pantalla por la proporción de píxeles del dispositivo.

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;

La resolución de píxeles lógica (Resolución de píxeles lógica)
es la resolución abstracta utilizada en flutter. Es un píxel lógico independiente del dispositivo. Representa un píxel virtual que el programa puede controlar y utilizar, y es un concepto general. Con la resolución de píxeles lógicos, el ancho y el alto de la pantalla se miden y prueban en píxeles lógicos, independientemente de la densidad de píxeles débiles real. Tomando el iPhone7 como ejemplo, la resolución lógica del teléfono móvil es 375 × 667.
La resolución de píxeles físicos (Resolución de píxeles físicos)
es la resolución de píxeles disponible en el dispositivo físico real, que se mide de acuerdo con la densidad de píxeles físicos del dispositivo. Píxeles del dispositivo o resolución del dispositivo. Tome el iPhone7 como ejemplo, la resolución del teléfono móvil es 750*1334.
La proporción de píxeles del dispositivo (Device Pixel Ratio)
también se fija en el mismo dispositivo, lo que indica la proporción de píxeles físicos a píxeles lógicos del dispositivo. La fórmula es: píxel lógico * DPR = píxel físico. Por ejemplo, DPR de iphone7= 750/375 = 2

2. Resumen

Práctica de desarrollo de Flutter: obtenga el tamaño de visualización de la pantalla y la resolución de píxeles físicos.

Registros de aprendizaje, sigue mejorando cada día.