Создание приложения с QML и Qt Quick

Хотя Qt Creator предоставляет нам встроенный шаблон проекта для создания приложения с QML/Qt Quick, но в реальности мы можем взять проект простого консольного приложения Qt и добавить в него всю необходимую функциональность. Например, создадим новый проект по шаблону Qt Console Application

Допустим, проект будет называться QmlApp:

В качестве системы построения выберем CMake:

Все остальные опции оставим по умолчанию.

В итоге создается стандартный проект с 2-мя файлами "CMakeLists.txt" и "main.cpp". Добавим в проект файл с интерфейсом на QML. Для этого нажмем на название проекта и в появившемся меню выберем пункт Add New...:

Среди шаблонов нового элемента выберем пункт QML File (Qt Quick 2):

Назовем новый файл main (расширение добавляется автоматически):

Остальные опции оставим по умолчанию. И после добавления файла main.qml проект будет выглядеть следующим образом:

Откроем файл main.qml и определим в нем следующий код:

import QtQuick

Window {
    width: 300
    height: 250
    visible: true
    title: qsTr("Hello METANIT.COM")
}

Здесь определяется простейшее окно в виде объекта Window. Но чтобы использовать использовать этот тип, нам надо импортировать пакет QtQuick

import QtQuick

Далее собственно определяем объект Window. Вначале указываем называние типа и в фигурных скобках указываются его свойства и их значения. Так в данном случае, устанавливаем свойство width - ширину и height - высоту, которые представляют числовые значения. Свойство visible указывает, будет ли окно видимым (для этого передаем ему значение true). И последнее свойство - title устанавливает заголовок окна, в качестве которого фактически выступает строка.

Теперь этот интерфейс надо подключить в приложение в файле main.cpp. Для этого изменим данный файл следующим образом:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    
    QQmlApplicationEngine engine;
    const QUrl url("qrc:/path/main.qml"); // ссылка на файл qml
    engine.load(url);   // загружаем файл qml
    return app.exec();
}

Подобное приложение, как и в случае с виджетами и другими типами приложений Qt, представляет тип QCoreApplication. В данном случае применяется наследующий тип QGuiApplication.

Для упрощения загрузки интерфейса из файлов QML применяется класс QQmlApplicationEngine. В его метод load() передается объект QUrl - ссылка на файл, который надо загрузить. Обратите внимание как выглядит ссылка - "qrc:/path/main.qml". Далее я объясню, почему именно такая ссылка.

Но пока весь этот функционал никак не подключен в проект. Нам надо изменить файл конфигурации CMakeLists.txt. При создании проекта он выглядит примерно следующим образом:

cmake_minimum_required(VERSION 3.14)

project(QmlApp LANGUAGES CXX)

set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core)
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core)

add_executable(QmlApp
  main.cpp
  main.qml
)
target_link_libraries(QmlApp Qt${QT_VERSION_MAJOR}::Core)

include(GNUInstallDirs)
install(TARGETS QmlApp
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

Изменим его следующим образом:

cmake_minimum_required(VERSION 3.14)

project(QmlApp LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)

# Добавляем пакет Quick
find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)

qt_standard_project_setup()

# Определяем компилируемые файлы
qt_add_executable(QmlApp
  main.cpp
)

# Добавляем файлы qml
qt_add_qml_module(QmlApp
    URI path      # ссылка, по которой будут загружаться файлы qml
    VERSION 1.0
    QML_FILES main.qml
)

target_link_libraries(QmlApp
    PRIVATE Qt6::Quick
)

include(GNUInstallDirs)
install(TARGETS QmlApp
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

Рассмотрим основные моменты. Прежде всего нам надо добавить компоненты Qt Quick:

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)

Далее определяем цель (target) и компилируемые файлы:

qt_add_executable(QmlApp
  main.cpp
)

Для упрощения название цели совпадает с названием проекта - в моем случае QmlApp.

Затем определяем ссылку на файлы qml:

qt_add_qml_module(QmlApp
    URI path      # ссылка, по которой будут загружаться файлы qml
    VERSION 1.0
    QML_FILES main.qml
)

Первый параметр метода qt_add_qml_module() представляет цель, которая определена ранее. Параметр URI указывает на ссылку, по которой будет загружаться файлы qml в приложении. Этот параметр представляет произвольный идентификатор, в моем случае это "path". И параметр QML_FILES содержит загружаемые файлы qml.

Обратите внимание на параметр URI - этот параметр и название файла qml задают ссылку, по которой будут загружаться файлы в приложении:

const QUrl url("qrc:/path/main.qml");

И последний момент - определяем библиотеки, применяемые при линковке приложения:

target_link_libraries(QmlApp
    PRIVATE Qt6::Quick
)

В качестве первого параметра опять указывается цель, которая определена выше. И последний параметр представляет подключемый модуль Qt6::Quick

Запустим проект, и нам отобразится следующее окно

Объекты в QML могут содержать вложенные объекты. Например, мы можем определить в окне приложения кнопки, текстовые поля и другие элементы. Например, изменим код в main.qml следующим образом:

import QtQuick

Window {
    width: 280
    height: 200
    visible: true
    title: "METANIT.COM"

    // определяем вложенный компонент
    Text{
        text: "Hello QML"
        font.pixelSize: 22
    }
}

В данном случае для простого вывода текста внутри Window определяем элемент Text. В этом элементе устанавливаем два свойства. Свойство text устанавливает текст. Свойство font.pixelSize устанавливает высоту шрифта в пикселях. В итоге мы полчим следующее окно