QML - Lesson 027. Adding QML in project based on QWidget

QQuickWidget, QML, C++, QWidget

When developing your application to Qt may happen a situation where required in an application written in QWidgets implement functional written in QML. To solve such a problem can be used QQuickWidget class that is used to render QML .

Write a simple hello world, which will draw the code written in QML widget that is placed in the window, based on QWidget . To make it look as follows:

Configuration of Pro file

To use this object class, you need to connect a Pro project file quickwidgets module. Also add a resource file, which will contain qml files, namely QmlLabel.qml file.

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

In the header file of the application window to include the header file of QQuickWidget and declare an object of this class.

#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

The project was created with the help of interface designer, so the code will only be present in addition QQuickWidget object placement Grid Layout , which is responsible for the layout of the widgets in the window.

#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

Content of the Hello World on the QML

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

Download project