Qml How to fit different equipment

Objective

To do embedded and mobile development, different devices, different resolutions need UI to adapt, this is a very real problem. Qml as a UI for Qt, the use of QML must solve the problem of adaptation.

Resolution

Now the same size of the screen, its resolution is also different, in QML with the anchors for the relative layout, it is in pixels. Now there is a concept called pixel number per inch. When the device's PPI is different, the size of the control is different, which can result in a design that is designed on a screen with a low PPI size and that the control looks smaller on a device with a high PPI size, so it is not advisable to use the pixel layout directly in QML.

Screen

The screen provided in QML provides us with device-related data, which is very important dpi (Devices per mm pixel), the device per millimeter of pixels, through which we can use the MM as the standard layout, so we do not appear, on high-resolution devices, The control becomes very small.

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

Device a property, take two decimal points. Then you can set this

    2 * dpi;}

This control is 2mm from the upper parent, and it behaves the same on that device, so the length and width of the control are the same.

We design the interface must be in a size design, then if a large device, then the control is not suitable, then we need a bit of scalability.

Telescopic

Screen.height and Screen.width are the length and width of the current display device, but they are pixels, get the actual size and need to be divided by DPI.
Suppose we design the length and width of a and B, and the runtime gets the length and width of C and D.
Well, that should be the case when it comes to layout.

    2 * dpi * (d/b);}

The same is true for the length and width of the control, so that we can implement the control and control intervals on different devices to scale with different sizes.

Qml How to fit different equipment