QML怎么适配不同的设备

前言

做嵌入式和移动开发，不同的设备，不同的分辨率需要UI能够适配，这是一个很现实的问题。QML作为Qt中为UI而生的，使用QML一定要解决适配的问题。

分辨率

现在同一尺寸的屏幕，其分辨率也是不同，在QML中使用 anchors 进行相对的布局时，其是以像素为单位。现在有一个概念，叫做每英寸像素数目。当设备的PPI不同时，控件的大小不同，这可能导致，如果设计是在一个尺寸小PPI低的屏幕上设计，将程序放到一个尺寸大PPI高的设备上，那么控件看上去就更小了，所以在QML中直接使用像素布局是不可取的。

Screen

QML中提供的Screen为我们提供了设备相关的数据，其中很重要的是DPI(Devices per mm pixel)，设备每毫米的像素点，通过这个我们就可以以mm为标准来做布局，这样我们就不会出现，在高分辨率的设备上，控件变得很小。

    property real dpi: Screen.pixelDensity.toFixed(2)

设备一个属性，取两个小数点。那么可以这样设置

    anchors {top:parent.top; topMargin: 2 * dpi;}

这个控件离parent上部 2mm，不管在那个设备上，其表现都是一样的，那么对于控件的长和宽表现也是一样的。

我们设计界面的时候肯定在一个尺寸上设计，那么如果换了一个很大的设备，那么控件就不适合了，那么我们需要有一点伸缩性。

伸缩

Screen.height和Screen.width为当前的显示设备的长和宽，但是他们是像素，得到实际的尺寸，需要除以dpi。

假设我们设计的时候的长和宽为a和b，运行时得到的长和宽为c和d。

那么在布局的时候就应该是这样的

    anchors {top:parent.top; topMargin: 2 * dpi * (d/b);}

那么对于控件的长和宽也是一样的，这样我们就实现了在不同的设备上实现控件和控件间隔随尺寸大小不同伸缩。