QML и Qt Quick

Введение в QML и Qt Quick. Создание проекта

Изначально использование виджетов из модуля Qt Widgets представляло основной подход к созданию графических приложений на Qt. Однако впоследствии появился второй подход, который представляет специального языка Qt Modeling Language (или сокращенно QML). QML представляет декларативный язык описания пользовательского интерфейса. Он появился вместе с развитием мобильных устройств с сенсорными экранами и позволяет создавать гибкие пользовательские интерфейсы с минимальным написанием кода. Основа функциональности языка QML сосредоточена в одноименном модуле Qt QML, который определяет и реализует язык и его инфраструктуру, а также предоставляет интерфейсы API для интеграции языка QML с JavaScript и C++. Дополнительно модули Qt Quick и Qt Quick Controls предоставляют множество визуальных элементов, анимацию и других компонентов, которые применяются в связке с QML. Таким образом, вместо использования виджетов Qt для проектирования пользовательского интерфейса также можно использовать QML и Qt Quick.

Хотя QML и Qt Quick появились прежде всего под влиянием развития мобильных аппаратов и сенсорных интерфейсов, тем не менее они поддерживают широкий диапазон платформ - как мобильные, так и десктопные ОС - Windows, Linux, Mac, iOS и Android.

QML опирается на встроенную систему типов, которые можно сгруппировать следующим образом:

• Базовые типы QML, такие как int, bool, real, list

• Типы языка JavaScript, например, Date и Array

• Типы объектов QML, например, Item, Rectangle, Image, Component. Они предоставляют визуальные компоненты или являются основной для создания визуальных компонентов. Как и виджеты, они могут иметь свойства, методы, сигналы.

• Типы, зарегистрированные модулями QML через C++

• Кастомные типы, определенные в файлах QML (в файлах с расширением .qml)

Базовым типом для всех визуальных элементов в Qt Quick является тип Item, который предоставляет общий набор свойств. Фактически он представляет собой прозрачный визуальный элемент, который можно использовать в качестве контейнера. Все остальные визуальные элементы в Qt Quick наследуются от Item. Для создания графического интерфейса в QML модуль Qt Quick Controls предоставляет набор встроенных компонентов, из которых отмечу основные из них:

• ApplicationWindow: представляет окно верхнего уровня с заголовком и футером

• BusyIndicator: индикатор загрузки

• Button: кнопка

• CheckBox: флажок, который может быть в отмеченном или неотмеченном состоянии

• ComboBox: кнопка со всплывающим окном

• Dial: компонент в виде кругового набора (как на старых стационарных телефонах)

• Dialog: диалоговое окно

• Label: метка с текстом

• Popup: высплывающее окно

• ProgressBar: индикатор прогресса операции

• RadioButton: радиокнопка или переключатель

• ScrollBar: вертикальные и горизонтальные полосы прокрутки

• ScrollView: визуальный компонент, который поддерживает прокрутку

• Slider: слайдер для выбора числового значения из некоторого диапазона

• SpinBox: выпадающий список

• Switch: кнопка-переключатель

• TextArea: элемент для ввода многострочного текста

• TextField: элемент для ввода однострочного текста

• ToolTip: всплывающая подсказка

• Tumbler: прокручиваемый список элементов для выбора

Чтобы использовать основные типы QML в файле QML, надо импортировать модуль QtQml с помощью следующей строки кода:

import QtQml

А чтобы использовать типы визуальных компонентов из Qt Quick Controlls применяется следующее выражение импорта:

import QtQuick.Controls

Создание пректа Qt Quick

На момент написания текущей статьи Qt Creator предоставляет встроенные типы проекта для создания приложения, которые используют Qt Quick:

• Qt Quick Application

• Qt Quick Application (compat)

Первый шаблон при создании проекта добавляет некоторую базовую функциональность, а второй шаблон определяет лишь пустое окно. Первый шаблон предполагает применение в качестве системы построения только CMake, а второй шаблон позволяет выбрать между CMake и qmake (как это делается при создании проекта виджетов). Первый шаблон ориентирован на использования новых версий Qt (6 и выше), а второй шаблон позволяет выбрать и более ранее версии Qt.

Итак, создадим в Qt Creator проект по шаблону Qt Quick Application:

Далее на следующем шаге как-нибудь назовем проект (например, HelloQmlApp) и определим его расположение:

Затем нам будет предложено установить пару опций и отметить минимальную поддерживаемую версию Qt. Оставим все опции по умолчанию:

Далее надо указать комплект (kit), который будет применяться для создания приложения:

В данном случае будем создавать под текущую операционную систему, поэтому выберем комплект, который начинается со слова "Desktop".

И на последнем шаге можно указать систему контроля версий и посмотреть, какие файлы будут добавлены:

Оставим все опции по умолчанию и нажмем на кнопку "Finish".

В итоге будет создан проект следующего типа:

Основые элементы проекта:

• CMakeLists.txt: скрипт сборки проекта с помощью CMake

• main.cpp: исходный код приложения на языке С++ с функцией main

• Main.qml: файл на языке QML, который описывает графический интерфейс

Если мы откроем файл Main.qml, то мы увидим там определение окна приложения:

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

Первой строкой импортируется модуль QtQuick, где собственно расположен тип Window. Далее определяется объект Window - объект окна, для которого настраивается четыре свойства: ширину (width), высоту (height), заголовок (title) и видимость (visible)

Как и любое приложение на C++, приложение Qt начинает выполнение с функции main, которая определена в файле main.cpp:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/HelloQmlApp/Main.qml"_qs);
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Функция main создает объект QQmlApplicationEngine и передает ему файл main.qml. Таким образом, интерфейс на QML будет применяться в приложении. Данный тип проекта можно рассматривать в качестве отправной точки, в который при необходимости можно добавить другие файлы или подкорректировать уже имеющийся стандартный функционал.

Запустим проект на выполнение. И нам отобразится окно, интерфейс которого определен в файле main.qml