Starting with Qt Quick and QML

Qt Quick is another way of creating applications with Qt. You can use it to create a complete application in place of Qt Widgets. The Qt Quick module provides transitions, animations, and visual effects. You can also customize graphical effects with shaders. This module is especially efficient at making software for devices using touchscreens. Qt Quick uses a dedicated language: Qt Modeling Language (QML). It is a declarative language; the syntax is close to the JSON (JavaScript Object Notation) syntax. Furthermore, QML also supports JavaScript expressions inline or in a separate file.

Let's begin with a simple example of a Qt Quick application using QML. Create a new file called main.qml with this code snippet:

import QtQuick 2.5 
import QtQuick.Window 2.2 
 
Window { 
    visible: true 
    width: 640; height: 480 
 
    // A nice red rectangle 
    Rectangle { 
        width: 200; height: 200 
        color: "red" 
    } 
} 

Qt 5 provides a nice tool called qmlscene to prototype a QML user interface. You can find the binary file in your Qt installation folder, for example: Qt/5.7/gcc_64/bin/qmlscene. To load your main.qml file, you can run the tool and select the file, or use the CLI with the .qml file in an argument: qmlscene main.qml. You should see something like this:

To use a Qt Quick module, you need to import it. The syntax is easy:

import <moduleName> <moduleVersion> 

In this example we import QtQuick, which is the common module that will provide basic components (Rectangle, Image, Text) and we also import the QtQuick.Window module that will provide the main window application (Window).

A QML component can have properties. For example, we set the width property of the Window class to the value 640. Here is the generic syntax:

<ObjectType> { 
    <PropertyName>: <PropertyValue> 
} 

We can now update main.qml file with some new rectangles:

import QtQuick 2.5 
import QtQuick.Window 2.2 
 
Window { 
    visible: true 
    width: 640; height: 480 
 
    Rectangle { 
        width: 200; height: 200 
        color: "red" 
    } 
 
    Rectangle { 
        width: 200; height: 200 
        color: "green" 
        x: 100; y: 100 
 
        Rectangle { 
            width: 50; height: 50 
            color: "blue" 
            x: 100; y: 100 
        } 
    } 
} 

Here is the visual result:

Your QML file describes the UI as a hierarchy of components. The hierarchy below the Window element is the following:

• Red Rectangle
• Green Rectangle
• Blue Rectangle

Each nested item will always have its x, y coordinates relative to its parent.

To structure your application, you can build reusable QML components. You can easily create a new component. All QML components must have a single root item. Let's build a new MyToolbar component by creating a new file called MyToolbar.qml:

import QtQuick 2.5 
 
import QtQuick 2.5 
 
Rectangle { 
    color: "gray" 
    height: 50 
 
    Rectangle { 
        id: purpleRectangle 
        width: 50; height: parent.height 
        color: "purple" 
        radius: 10 
    } 
 
    Text { 
        anchors.left: purpleRectangle.right 
        anchors.right: parent.right 
        text: "Dominate the Mobile UI" 
        font.pointSize: 30 
    } 
} 

The gray Rectangle element will be our root item used as background. We also created two items:

• A purple Rectangle element that can be identified with the ID purpleRectangle. The height of this item will be the height of its parent, that is, the gray Rectangle element.
• A Text item. In this case, we use anchors. It will help us to layout items without using hardcoded coordinates. The left of the Text item will be aligned with the right of purpleRectangle, and the right of the Text item will be aligned with the right of the parent (the gray Rectangle element).

You can use MyToolbar in your window by updating your main.qml:

Window { 
    ... 
    MyToolbar { 
        width: parent.width 
    } 
} 

We set the width to the parent width. Like this, the toolbar fills the window's width. Here is the result:

Anchors are great to align specific items, but if you want to layout several items in grid, row, or column fashion, you can use the QtQuick.layouts module. Here is an example of the updated main.qml:

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Layouts 1.3 
 
Window { 
    visible: true 
    width: 640; height: 480 
 
    MyToolbar { 
        id: myToolbar 
        width: parent.width 
    } 
 
    RowLayout { 
        anchors.top: myToolbar.bottom 
        anchors.left: parent.left 
        anchors.right: parent.right 
        anchors.bottom: parent.bottom 
 
        Rectangle { width: 200; height: 200; color: "red" } 
        Rectangle { width: 200; height: 200 color: "green" } 
        Rectangle { width: 50; height: 50; color: "blue" } 
    } 
} 

You should get something like this:

As you can see, we use a RowLayout element that fits under the myToolbar and to its parent, a Window element. This item provides a way to dynamically layout items in a row. Qt Quick also provides other layout items: GridLayout and ColumnLayout.

Your custom component can also expose custom properties that can be modified outside of the component itself. You can do it by adding the property attribute. Please update MyToolbar.qml:

import QtQuick 2.5 
 
Rectangle { 
 
    property color iconColor: "purple" 
    property alias title: label.text 
 
    color: "gray" 
    height: 50 
 
    Rectangle { 
        id: purpleRectangle 
        width: 50; height: parent.height 
        color: iconColor 
        radius: 10 
    } 
 
    Text { 
        id: label 
        anchors.left: purpleRectangle.right 
        anchors.right: parent.right 
        text: "Dominate the Mobile UI" 
        font.pointSize: 30 
    } 
} 

The iconColor is a really new property that is a fully-fledged variable. We also update the Rectangle attribute to use this property as color. The title property is only an alias, you can see it as a pointer to update the label.text property.

From outside you can use these attributes with the same syntax; please update the main.qml file with the following snippet:

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Layouts 1.3 
 
Window { 
    visible: true 
    width: 640; height: 480 
 
    MyToolbar { 
        id: myToolbar 
        width: parent.width 
 
        title: "Dominate Qt Quick" 
        iconColor: "yellow" 
    } 
   ... 
} 

You should get a nice updated toolbar like this one:

We have covered the basics of QML, now we are going to proceed to mobile application development using QML.