При разработке приложения на 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
}
}
