Edited 2016-06-05: Updated for Qt 5.7 RC
My blog series is targeted to mobile app developers coming from the outside without any knowledge of Qt and simply want to develop mobile apps using the newest way: qt.labs.controls (Qt 5.6) / QtQuickControls 2 (Qt 5.7+)
Qt is cool
–> exists since more then 20 years
–> great for Application Development
–> great for Device Creation
–> Qt for mobile, for desktop, for embedded, …
–> sooooo many samples
–> sooooo many targets
–> sooooo many ways to go
–> Qt UI — Widgets — Qt Quick — Qt 5.6/5.7 UI Controls redefined
Confused ?
This is the reason why I’m writing this blog posts to help you finding the shortest path through Qt jungle.
Our goal is mobile APP development using new Controls in Material style for Android and iOS.
Here some first tips to survive:
Ignore Widgets
There are many samples and tutorials you can access from Qt Creator.
If the project uses QtWidgets – please ignore !
QtWidgets are perfect for Desktop APPs and look great on OSX, Windows, Linux using the native controls.
We want to use the new qt.labs.controls (Tech preview in Qt 5.6) for mobile APPs
Import the right Controls
Attention: many sample project are importing Controls 1:
import QtQuick.Controls 1.x
QtQuick Controls 1.x are the Controls used up to Qt 5.6.
The new qt.labs.controls we want to use for mobile APPs are introduced in Qt 5.6 as a TP (Technical Preview).
So for Qt 5.6 you should use
import Qt.labs.controls 1.x
Learn about the differences between the Controls 1.x and qt.labs.controls: https://doc-snapshots.qt.io/qt5-5.6/qtlabscontrols-differences.html
Beginning with Qt 5.7 the new Controls are ‘official’
import QtQuick.Controls 2.x
If you started in Qt 5.6 to learn about the new Controls be aware: API can change for Qt 5.7 and you also have to change your import statements.
Controls too small on Android or iOS ?
While trying out some of the Examples it will happen that all is much too small.
Qt 5.6 introduced HighDPI support on all platforms. This must be switched on.
Easiest way to do this is inside your main.cpp:
QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
Controls not using Material Style ?
Material Style only can be used from qt.labs.controls (Qt 5.6) or QtQuick.Controls 2.x
There are currently three different Styles: Material (Google Material Style), Universal (Windows 10 Universal Style), Default.
You can switch on Material Style easiest way in main.cpp:
Qt 5.6 / 5.7 Beta:
qputenv("QT_LABS_CONTROLS_STYLE", "material");
Qt 5.7 RC or greater:
qputenv("QT_QUICK_CONTROLS_STYLE", "material");
Controls wrong placed ?
Starting with Qt this can happen: all or some of your Controls are placed at Top Left.
Verify if your Controls are placed inside Layouts.
Don’t misuse Positioner and Layouts – per ex. Row and RowLayout
There’s a document about Positioners and Layouts in QML.
← Back (HowTo Translations (i18n))
→ Next Article (Qt Quick Controls 2)
⇐ Home (Overview / Topics)
