Last modified on 22 June 2013, at 06:18

Qt/Qt Quick Overview

Qt Quick includes a modeling language named QMLto build graphical user interfaces.


Basic exampleEdit

When creating a new Qt Quick 2 application with Qt Creator, a default QML window is added.

It describes a window saying Hello World which closes when clicked.

import QtQuick 2.0
 
Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}


Qt Quick Types UsedEdit

  • Rectangle has 5 main properties: border.color, border.width, color, gradient and radius; they define the rectangle's shape and colors.
  • Text says Hello World.
  • MouseArea quits the application when clicked.
  • anchors statements are part of the Item type that is inherited by other visual types, such as Rectangle and Text.


Complete exampleEdit

QML fileEdit

QtQuick red triangle example.png

window.qml:

This file describes a window including a programmatically defined triangle. The Triangle item is defined in the Shapes library (version 1.0).

import QtQuick 2.0
import Shapes 1.0
 
Item {
    width: 400; height: 300
 
    onWidthChanged: console.log("Width change: ", width)
 
    Triangle {
        anchors.top: parent.top;
        anchors.left: parent.left;
        anchors.right: parent.right;
 
        height : parent.height /2
    }
}


Resource fileEdit

application.qrc:

This file defines the resources used by the application; here window.qml is added to the gui namespace.

<RCC>
    <qresource prefix="/gui">
        <file>window.qml</file>
    </qresource>
</RCC>


MainEdit

main.cpp:

This is where the application starts. It includes the TriangleItem defined in the triangle.h file : it is registered by the function qmlRegisterType under the name Triangle in the Shapes library as of version 1.0.

The main window starts with the gui/window.qml template.

#include "triangle.h"
 
#include <QGuiApplication>
#include <QtQuick/QQuickView>
 
int main(int argc, char *argv[])
{
	 QGuiApplication app(argc, argv);
 
	 qmlRegisterType<TriangleItem>("Shapes", 1, 0, "Triangle");
 
	 QQuickView view;
 
	 // resize items when resizing window
	 view.setResizeMode(QQuickView::SizeRootObjectToView);
 
	 view.setSource(QUrl("qrc:///gui/window.qml"));
	 view.show();
	 return app.exec();
}


Triangle definitionEdit

triangle.h:

The triangle item is made of geometry (containing 3 points) and a material (red).

The red triangle is drawn within the updatePaintNode function.

#ifndef TRIANGLE_H
#define TRIANGLE_H
 
#include <QQuickItem>
#include <QSGGeometry>
#include <QSGFlatColorMaterial>
 
class TriangleItem: public QQuickItem
{
	Q_OBJECT
public:
	TriangleItem(QQuickItem* parent = 0);
 
protected:
	QSGNode* updatePaintNode(QSGNode*, UpdatePaintNodeData*);
 
private:
	QSGGeometry m_geometry;
	QSGFlatColorMaterial m_material;
};
 
#endif // TRIANGLE_H


Triangle implementationEdit

triangle.cpp:

The material is set to the Qt::red color. The triangle vertices are defined using the window boundaries (from the boundingRect() function).

Material and geometry are then assigned to a new geometry node which is added to the scene node (QSGNode* n).

#include "triangle.h"
 
#include <QQuickWindow>
#include <QSGGeometryNode>
 
TriangleItem::TriangleItem(QQuickItem *parent):
	QQuickItem(parent),
	m_geometry(QSGGeometry::defaultAttributes_Point2D(), 3)
{
	setFlag(ItemHasContents);
	m_material.setColor(Qt::red);
}
 
QSGNode* TriangleItem::updatePaintNode(QSGNode* n, UpdatePaintNodeData*)
{
	if (!n)
		n = new QSGNode;
 
	QSGGeometryNode* geomnode = new QSGGeometryNode();
 
	QSGGeometry::Point2D* v = m_geometry.vertexDataAsPoint2D();
	const QRectF rect = boundingRect();
	v[0].x = rect.left();
	v[0].y = rect.bottom();
	v[1].x = rect.left() + rect.width()/2;
	v[1].y = rect.top();
	v[2].x = rect.right();
	v[2].y = rect.bottom();
	geomnode->setGeometry(&m_geometry);
	geomnode->setMaterial(&m_material);
 
	n->appendChildNode(geomnode);
	return n;
}


Project fileEdit

application.pro:

This is the project definition file used by Qt to build our little application.

QT += qml quick
 
TARGET = example
TEMPLATE = app
 
 
SOURCES += main.cpp \
    triangle.cpp
 
HEADERS  += \
    triangle.h
 
RESOURCES += application.qrc

Build and run the application with:

qmake
make
./example

External linksEdit