px(像素):像素是指基本原色素及其灰度的基本编码。像素是构成数码影像的基本单元,通常以像素每英寸PPI(pixels per inch)为单位来表示影像分辨率的大小。
dp(与密度无关的像素):一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp = 1px。
计算公式: 1dp * 像素密度 / 160 = 实际像素数
下面是一个模板用于把dp转换成实际的像素值(px)。// Units.qml
pragma Singleton
import QtQuick 2.0
/*!
\qmltype units
\brief Provides access to screen-independent units known as DPs (device-independent pixels).
This singleton provides methods for building a user interface that automatically scales based on
the screen density. Use the \l units::dp function wherever you need to specify a screen size,
and your app will automatically scale to any screen density.
Here is a short example:
\qml
import QtQuick 2.0
import Material 0.1
Rectangle {
width: units.dp(100)
height: units.dp(80)
Label {
text:"A"
font.pixelSize: units.dp(50)
}
}
\endqml
Here is a short example too:
\qml
import QtQuick 2.0
import "."
Rectangle {
width: units.dp(100)
height: units.dp(80)
Label {
text:"A"
font.pixelSize: units.dp(50)
}
}
\endqml
*/
Object {
id: units
/*!
\internal
This holds the pixel density used for converting millimeters into pixels. This is the exact
value from \l Screen:pixelDensity, but that property only works from within a \l Window type,
so this is hardcoded here and we update it from within \l ApplicationWindow
*/
property real __pixelDensity: 4.5 // pixels/mm
function cm(number) {
return number * __pixelDensity * 10
}
/*!
Converts millimeters into pixels. Used primarily by \l units::dp, but there might be other
uses for it as well.
*/
function mm(number) {
return number * __pixelDensity
}
function inch(number) {
return number * __pixelDensity * 10 * 2.54
}
// 相对以视窗的宽度,视窗宽度是100vm
function vw(i, width) {
return number * (width / 100)
}
// 相对以视窗的高度,视窗高度是100vh
function vh(number, height) {
return number * (height / 100)
}
function vmin(number, width, height) {
return number * (Math.min(width, height) / 100)
}
function vmax(number, width, height){
return number * (Math.max(width, height) / 100)
}
function dp(number) {
var px = Math.round(number * (__pixelDensity * 25.4 / 160));
if(Qt.platform.os === "windows" || Qt.platform.os === "mac")
return px * 2;
else
return px;
}
}// qmldir
module Material
singleton units 0.1 Units.qml// Object.qml
import QtQuick 2.0
QtObject {
id: object
//default property alias data: object.__data
//property list __data
default property alias children: object.__childrenFix
property list __childrenFix: [QtObject {}]
}
关于pointSize
从 pointSize 到 pixelSize 的计算公式: pixelSize = DPI * pointSize/72 。