Introduction to the QML Language

Basic QML Syntax

QML looks like this:

 import QtQuick 1.0

 Rectangle {
     width: 200
     height: 200
     color: "blue"

     Image {
         source: "pics/logo.png"
         anchors.centerIn: parent
     }
 }

Here we create two objects, a Rectangle object and its child Image object. Objects are specified by their type, followed by a pair of braces in between which additional data can be defined for the object, such as its property values and any child objects.

Properties are specified with a property: value syntax. In the above example, we can see the Image object has a property named source, which has been assigned the value "pics/logo.png". The property and its value are separated by a colon.

Properties can be specified one-per-line:

 Rectangle {
     width: 100
     height: 100
 }

or you can put multiple properties on a single line:

 Rectangle { width: 100; height: 100 }

When multiple property/value pairs are specified on a single line, they must be separated by a semicolon.

The import statement imports the QtQuick module, which contains all of the standard QML Elements. Without this import statement, the Rectangle and Image elements would not be available.

 Text {
     text: "Hello world!"    //a basic greeting
     /*
         We want this text to stand out from the rest so
         we give it a large size and different font.
      */
     font.family: "Helvetica"
     font.pointSize: 24
 }

 Text {
     text: "Hello world!"
     //opacity: 0.5
 }

 import QtQuick 1.0

 Row {
     Text {
         id: text1
         text: "Hello World"
     }

     Text { text: text1.text }
 }

 Item {
     width: 100 * 3
     height: 50 + 22
 }

 Item {
     width: 300
     height: 300

     Rectangle {
         width: parent.width - 50
         height: 100
         color: "yellow"
     }
 }

 Item {
     x: 10.5             // a 'real' property
     state: "details"    // a 'string' property
     focus: true         // a 'bool' property
     // ...
 }

 Item {
     x: "hello"  // illegal!
 }

 Rectangle {
     width: 100; height: 100

     onWidthChanged: console.log("Width has changed to:", width)
     onColorChanged: console.log("Color has changed to:", color)
 }

 Item {
     children: [
         Image {},
         Text {}
     ]
 }

 Image {
     children: Rectangle {}
 }

 State {
     changes: [
         PropertyChanges {},
         PropertyChanges {}
     ]
 }

 State {
     PropertyChanges {}
     PropertyChanges {}
 }

 Text {
     font.pixelSize: 12
     font.bold: true
 }

 Text {
     font { pixelSize: 12; bold: true }
 }

 Component {
     id: myDelegate
     Text {
         text: "Hello"
         color: ListView.isCurrentItem ? "red" : "blue"
     }
 }

 ListView {
     delegate: myDelegate
 }

 Item {
     focus: true
     Keys.onSelectPressed: console.log("Selected")
 }

 Item {
     width: 100; height: 100

     MouseArea {
         anchors.fill: parent
         onClicked: {
             console.log("mouse button clicked")
         }
     }
 }

 MouseArea {
     acceptedButtons: Qt.LeftButton | Qt.RightButton
     onPressed: {
         if (mouse.button == Qt.RightButton)
             console.log("Right mouse button pressed")
     }
 }