Wikibooks

Qt/Qt Quick Overview

< Qt

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


Basic example

edit

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
  • 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

QML file

edit
 

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

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

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

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

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

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
edit
Retrieved from "https://en.wikibooks.org/w/index.php?title=Qt/Qt_Quick_Overview&oldid=3678175"