Qt Quick includes a modeling language named QMLto build graphical user interfaces. 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(); } } } 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. 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 } } application.qrc: This file defines the resources used by the application; here window.qml is added to the gui namespace. window.qml   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  #include  int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); qmlRegisterType("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.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  #include  #include  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.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  #include  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; } 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 Overview: Qt Quick official tutorial Getting started with Qt Quick References: Qt Quick XML types Positioning with anchors
{'wiki_source': 'wikibooks', 'other_info': "{'content_model': 'wikitext', 'language': 'en', 'title': 'Qt/Qt Quick Overview', 'type': 'text'}"}