Skip to main content

QtWS16- A Simple Way to Create a QML UI for any Screen Size or Resolution, Chris Cortopassi, ICS

Day 2 at QtWS16, Chris Cortopassi, ICS "A Simple Way to Create a QML UI that Runs on any Screen Size or Resolution" Watch more at www.qt.io/qtws16/ With the plethora of touch screen sizes, aspect ratios, and resolutions available, a common requirement is to develop UIs that are “screen independent”, especially for mobile phones and tablets. Even embedded projects that start on a fixed screen size might eventually be ported to a different screen, which would be a pain if dimensions were hard-coded and .png assets were heavily used for backgrounds. There is a “Scalability” page in the Qt documentation that attempts to deal with this issue and mentions techniques such as (a) using Qt Quick Controls, (b) using QML Screen.pixelDensity , or (c) Loading Files Depending on Platform: http://doc.qt.io/qt-5/scalability.html however, all of these techniques have drawbacks. In this talk, I will show a very simple way to write resizable QML controls and screens from (a) QML primitives (Item, Rectangle, Text, Image…) that (b) have no knowledge of the screen they’re running on and (c) are implemented with a single set of .qml files and .png assets.