411 REFERENCE · Wikibooks
Qt/Qt Quick Overview
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Qt Quick includes a modeling language named QMLto build graphical user interfaces.
Basic example
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 Used
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 example
QML file
200px|right
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 file
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>
Main
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 definition
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 implementation
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 file
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 links
Overview:
Qt Quick official tutorial
Getting started with Qt Quick
References:
Qt Quick XML types
Positioning with anchors