QML - Урок 027. Добавляем QML в проект на QWidget

QQuickWidget, QML, C++, QWidget

При разработке приложения на Qt может случиться такая ситуация, когда потребуется в приложение, написанное на QWidgets внедрить функционал, написанный на QML. Для решения подобной задачи может использоваться класс QQuickWidget , который служит для рендеринга QML.

Напишем простейший hello world, который позволит отрисовать код, написанный на QML в виджете, который помещён в окно, основанное на QWidget. Чтобы оно выглядело следующим образом:

Настройка Pro файла

Чтобы воспользоваться объектом данного класса, необходимо в Pro файле проекта подключить модуль quickwidgets. Также добавим ресурсный файл, в котором будут содержаться qml файлы, а именно файл QmlLabel.qml.

QT       += core gui quickwidgets
 
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
 
TARGET = qmlwidget
TEMPLATE = app
 
DEFINES += QT_DEPRECATED_WARNINGS
 
SOURCES += main.cpp\
        widget.cpp
 
HEADERS  += widget.h
 
FORMS    += widget.ui
 
RESOURCES += \
    qml.qrc

widget.h

В заголовочном файле окна приложения подключим заголовочный файл QQuickWidget и объявим объект данного класса.

#ifndef WIDGET_H
#define WIDGET_H
 
#include <QWidget>
#include <QQuickWidget>
 
namespace Ui {
class Widget;
}
 
class Widget : public QWidget
{
    Q_OBJECT
 
public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();
 
private:
    Ui::Widget* ui;
    QQuickWidget* m_quickWidget;
};
 
#endif // WIDGET_H

widget.cpp

Проект создавался с помощью дизайнера интерфейсов, поэтому в коде будет присутствовать только добавление объекта QQuickWidget в размещение Grid Layout , которое отвечает за компоновку виджетов в окне.

#include "widget.h"
#include "ui_widget.h"
 
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    m_quickWidget = new QQuickWidget(this) ;
    m_quickWidget->setSource(QUrl("qrc:/QmlLabel.qml"));
    m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
    ui->gridLayout->addWidget(m_quickWidget, 1, 0);
}
 
Widget::~Widget()
{
    delete ui;
}

QmlLabel.qml

Содержимое Hello World на QML

import QtQuick 2.5
import QtQuick.Controls 2.1
 
Item {
 
    Text {
        id: text
        text: qsTr("Hello world")
 
        anchors.centerIn: parent
    }
 
}

Скачать архив с проектом