Tutorial by Examples

QML comes with newer Version of the cross-platform application framework Qt. You can find the newest Version of Qt in the Downloads section. To create a new QML Project in the Qt Creator IDE, select "File -> New ..." and under "Applications" select "Qt Quick-Application...

A simple application showing the text "Hello World" in the center of the window. import QtQuick 2.3 import QtQuick.Window 2.0 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") //The method qsTr() is used for translations from one la...

You can easily transform every component in a clickable button using the MouseArea component. The code below displays a 360x360 window with a button and a text in the center; pressing the button will change the text: import QtQuick 2.0 Rectangle { width: 360 height: 360 Rectang...

This example shows the simplest usage of the Image component to display an image. The Image source property is a url type that can be either a file with an absolute or relative path, an internet URL (http://) or a Qt resource (qrc:/) import QtQuick 2.3 Rectangle { width: 640 height: 4...

This example shows how mouse event is used in QML. import QtQuick 2.7 import QtQuick.Window 2.2 Window { visible: true Rectangle { anchors.fill: parent width: 120; height: 240 color: "#4B7A4A" MouseArea { anchors.fill: paren...