屏幕适配 鸿蒙 android flutter 基本概念

1,143 阅读3分钟

image.png

  • 屏幕尺寸:5.0(inch英寸)
  • 分辨率:1080*1920px
  • dpi = √{(1080^2+1920^2)}/ 5.0=440dpi

屏幕单位名词

一、屏幕尺寸:屏幕对角线长度(单位英寸)
  • 屏幕对角线长度
二、屏幕像素/物理像素:屏幕宽高的像素(单位px)
  • 2K 屏幕代表宽度为1440px左右的屏幕
  • 1.5K 屏幕宽度为1220px左右
三、像素密度PPI:是每英寸像素(单指屏幕在宽度或者高度上的像素点密度)
  • 屏幕宽度1920px,物理宽度19.2英寸 屏幕PPI=1920/19.2=100PPI
四、 屏幕像素密度:单位尺寸中包含的像素点指整个屏幕像素点和对角线尺寸的比值(单位dpi)
计算公式:像素密度=屏幕总像素/尺寸 =√{(长度像素数^2+宽度像素数^2)}/ 屏幕尺寸
屏幕尺寸:5.5 宽高:1080*1920
 √(1080^2 + 1920^2) / 5.5401 ppigenha
五、Flutter逻辑像素实际计算和dp差不多可以直接用
  • 概念:设备像素也被称为物理像素。逻辑像素也被称为与设备无关或与分辨率无关的像素
  • devicePixelRatio(设备像素缩放比):实际像素与逻辑像素的比例
  • 计算:物理像素px = 逻辑像素 * devicePixelRatio
  • devicePixelRatio跟实际设别有关如需严格按照设计稿需要使用三方适配方案flutter_screenUtil
  //获取屏幕大小 (逻辑像素分辨率)
  Size scrSize = MediaQuery.of(context).size; 
  double screenWidth = scrSize.width; 
  double screenHeight = scrSize.width;
  //获取 devicePixelRatio 与android dp和px倍数计算差不多
  double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
  //逻辑像素
  double canvasWidth = screenWidth*devicePixelRatio; 
  double canvasHeight = screenHeight*devicePixelRatio;
  //屏幕适配方案
  ## [flutter_screenUtil](https://pub.flutter-io.cn/packages/flutter_screenutil)
六、鸿蒙 VP 虚拟像素(实际也与dp计算公式一样)
  • 计算公式:VP=(px*160)/dpi==>1VP=(dpi/160)px
    求100px dpi=320 的vp值
    (100px*160)/320=44VP
  • 官方适配管理方案 AttrHelper
五、 px、dp、sp、pt、inch 概念
  • px 顾名思义 分辨率

  • sp android中的字体尺寸,计算方式与dp类似

    Android系统支持用户设定字体大小,因而sp的实际大小还会根据用户设定在原基础上进行缩放。

  • dp 是安卓的开发单位,也是一个固定长度的单位

       //ldpi:mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3
       计算:1dp=(屏幕像素密度DPI/160)px
    
  • pt 是iOS系统的开发单位,而且是长度固定的,不随屏幕像素密度ppi变化而变化。

    计算:1pt=1/72英寸

  • inch 英寸,1 英寸约等于2.54厘米,主要用来描述手机屏幕的大小。

    一般说的屏幕多少尺寸是指的对角线长度

在 Android 开发

屏幕密度mdpihdpixhdpixxhpdixxxhdpi
代表设计像素320 × 480 px480 × 800 px720 × 1280 px1080 × 1920 px1440 × 2256 px
标志尺寸3.63.884.54.584.5
dpi160240320480640
基准dpi160160160160160
倍率@1x@1.5x@2x@3x@4x