QML Syntax

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

Objects are specified by their type, followed by a pair of braces. Object types always begin with a capital letter. In the above example, there are two objects, a Rectangle, and an Image. Between the braces, we can specify information about the object, such as its properties.

Properties are specified as propertyname: value. In the above example, we can see the Image 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 Qt module, which contains all of the standard QML Elements. Without this import statement, the Rectangle and Image elements would not be available.

 Rotation {
     angle: 360 * 3
 }

 Item {
     Text {
         id: text1
         text: "Hello World"
     }
     Text {
         id: text2
         text: text1.text
     }
 }

 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
 }