Qt и QML: с чего начать? Первое приложение за 10 минут

Qt — это кроссплатформенный фреймворк для разработки приложений под Windows, Linux, macOS, Android и iOS. Исторически Qt ассоциировался с Widgets (QWidget), однако современный стек Qt ориентирован на QML + Qt Quick — декларативный язык описания интерфейсов, оптимизированный для анимаций, сенсорных экранов и высокой производительности UI.

В этой статье мы создадим минимальное рабочее приложение на Qt + QML и разберём ключевые концепции, необходимые для старта.

Содержание

Что такое QML и Qt Quick

QML (Qt Modeling Language) — декларативный язык, похожий на JSON / CSS / JavaScript, предназначенный для описания интерфейса.

Qt Quick — это runtime и набор компонентов (Rectangle, Text, Button, ListView и т.д.), которые интерпретируют QML.

Разделение ролей:

C++ — логика, данные, производительность, работа с ОС
QML — UI, анимации, визуальное поведение

Минимальная структура проекта

После создания проекта Qt Quick Application структура будет выглядеть примерно так:

qml_app/
├── test.pro
├── main.cpp
└── qml/
└── Main.qml

Точка входа: `main.cpp`

Минимальный main.cpp для QML-приложения:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/qml/Main.qml")));

    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

Что здесь происходит:

QGuiApplication — облегчённая версия QApplication (без Widgets)
QQmlApplicationEngine — загружает и исполняет QML
qrc:/ — путь к ресурсу из Qt Resource System

Первый QML-файл: `Main.qml`

Создадим простой интерфейс с текстом и кнопкой.

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 400
    height: 300
    visible: true
    title: "Первое QML-приложение"

    Column {
        anchors.centerIn: parent
        spacing: 12

        Text {
            id: label
            text: "Привет, Qt + QML"
            font.pixelSize: 20
        }

        Button {
            text: "Нажми меня"
            onClicked: label.text = "Кнопка нажата"
        }
    }
}

Ключевые моменты:

ApplicationWindow — корневой элемент
UI описывается иерархией объектов
onClicked — JavaScript-обработчик события
Прямая реактивная связь между элементами

Связь C++ и QML (базовый пример)

Добавим C++-класс и передадим его в QML.

C++ класс

// backend.h
#pragma once
#include <QObject>

class Backend : public QObject {
    Q_OBJECT
public:
    Q_INVOKABLE QString sayHello() const {
        return "Привет из C++";
    }
};

Регистрация в main.cpp

#include "backend.h"

Backend backend;
engine.rootContext()->setContextProperty("backend", &backend);

Использование в QML

Button {
    text: "Вызвать C++"
    onClicked: label.text = backend.sayHello()
}

Таким образом:

C++ остаётся строгим и типизированным
QML управляет визуальным слоем

Итог

За 10 минут вы можете:

создать Qt Quick приложение
описать UI в QML
связать интерфейс с C++
получить кроссплатформенный результат