Qt/Qt Quick Overview
Qt Quick includes a modeling language named QMLto build graphical user interfaces.
Basic example
[edit | edit source]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
[edit | edit source]- 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
[edit | edit source]QML file
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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
[edit | edit source]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
[edit | edit source]- Overview:
- References: