Qt/Qt Quick Overview

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.

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.

QML file
window.qml:

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

Resource file
application.qrc:

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

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.

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.

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).

Project file
application.pro:

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

Build and run the application with: