Doing More with Qt Quick

As you saw in Chapter 3, Designing Your Application with Qt Designer, Qt Quick is Qt's declarative environment for application development. Qt Quick is ideal for fluid, animated user interfaces where you're working more with touch and mouse events, and where the style of your application is based on graphical resources instead of the need to mirror the host platform's widget set.

Qt Quick provides several basic graphical elements and the ability to combine them using a scripting language based on JavaScript, giving you the ability to tap existing skills in web design to create user experiences that are impossible to create entirely in HTML and CSS without a great deal of additional work. However, you can be empowered to do even more with Qt Quick by using some of its other features that we have not explored in the previous chapter. Let&apos...

Technical requirements

The technical requirements for this chapter include Qt 5.13.1 MinGW 64-bit, Qt Creator 4.10.0, and Windows 10.

The GitHub link for this chapter can be found here:

https://github.com/PacktPublishing/Application-Development-with-Qt-Creator-Third-Edition/tree/master/Chapter07.

Understanding the fundamental concepts of Qt Quick

As you saw in Chapter 3, Designing Your Application with Qt Designer, Qt Quick enables you to focus on declaring what's visible on the screen and how it should behave, rather than creating objects. Qt Quick uses the Qt Modeling Language (QML) to do this, which uses a JavaScript-like syntax and a tree structure to define visible objects and their relationships, as well as script their behavior. Objects have a strict parent-child hierarchy that defines their visual relationship; parent objects contain their children on display.

To create a new Qt Quick project, go to File | New File or Project | Qt Quick Application - Empty.

Objects are placed in Qt Quick's main window using the traditional coordinate system, with (0, 0) in the upper left-hand corner of the display. Child objects can be placed in their parents either using...

Using states and transitions in Qt Quick

Traditional GUI programming often involves easy-to-write but boilerplate state machines for controls to track control and application states. For example, a button might have several states: when the mouse hovers over it; when it's pressed; and then once pressed, a separate state for on or off in the case of a checkbox or a push button. While this code isn't hard to write, it does involve some writing, and more sophisticated interfaces require more of it.

Qt Quick provides an abstraction for this through its State construct, which groups a state's name as well as the condition under which it occurs and which properties of an object should take on new values. We first saw this in Chapter 3, Designing Your Application with Qt Designer, when we wrote our own button component, reprinted here:

import QtQuick 2.12
import QtQuick...

Integrating Qt Quick and C++

You can run a simple Qt Quick application using the qmlviewer application, an application provided as part of the Qt SDK. However, most of the time, you'll create a Qt Quick application using the Qt Quick application wizard in Qt Creator, which results in a hybrid application consisting of a Qt C++ application container and QML files as resources that the application loads and plays at runtime.

If we take a look at main.cpp in a project that we create with this wizard, we will see the following code:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
 const QUrl url(QStringLiteral("qrc:/main.qml"));
 QObject::connect(&engine, &QQmlApplicationEngine...

Putting it all together – an image gallery application

Let's apply what we've discussed in the last few chapters by putting together a simple image gallery application, like the photo gallery on smartphones. We'll display images from the system's directory in a grid, letting the user flick to scroll the images. Here's how our application will look:

To do this, we need the following components:

• A model containing the paths to the images to be displayed
• A controller responsible for creating the model
• An image provider that can load the images from the system's image directory
• The QML UI

Let's take a look at the application's QML first:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 1080 / 2
    height: 1920 / 2

    Item {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors...

Introducing the new Qt Quick Controls 2

Ever since Qt 5.6, Qt Quick Controls 2 has been released to replace version 1, which is known to have performance issues and technical problems, which led to its deprecation. With Qt Quick Controls 2, everything has been rebuilt from scratch with performance in mind. Qt Quick Controls 2 not only run smoothly on PC, but also mobile and embedded devices.

To use Qt Quick Controls 2 in your project, perform the following steps:

1. Add the following module to your QML file:

import QtQuick.Controls 2.12

2. If you somehow need to use Qt Quick Control 2 in your C++ code, you must first add the quickcontrols2 module to your qmake project file:

QT += quickcontrols2

3. After that, you may include the QtQuickControls2 header in your C++ source code:

#include <QtQuickControls2>

Following are some of the QML Types available under Qt Quick Control 2...

Understanding the new graphical editor for SCXML

Qt introduced SCXML as a new feature in 5.7, which serves as a notation format for building a sophisticated state machine for your application. A state machine is a mechanism for which a program or a widget of a program changes its properties based on the current state you defined for it. We have seen how a Push Button changes its appearance when the mouse hovers on it or when pressed by the user. These are different states of Push Button and its behavior is determined and executed by the state machine.

With SCXML, you can define a more sophisticated state machine for your program and save it in the human-readable SCXML file format for Qt to parse and process. Qt will then generate C++ classes according to the content of the SCXML file to drive the state machine you defined earlier. Qt also provides a graphical editor for you to...

Summary

In this chapter, you took a whirlwind tour of Qt Quick, Qt's declarative framework for application development. You learned about the basic visible items that Qt Quick provides as a foundation for application development and how to position items using Qt Quick's layout system, create a simple web browser using a web engine component, and create a simple list using Qt Quick's list view.

Other than that, you also understood about Qt Quick's support for animations and transitions. We saw how to make use of the state construct to change the property of an object based on its current state, but also learned how to make use of the latest SCXML editor to create a much more sophisticated state machine.

Finally, we saw how to link Qt Quick and C++, giving you the best of both worlds in Qt development. By following the example shown in this chapter, we learned...