Qt Reference Documentation

Introduction to the QML language

QML is a declarative language designed to describe the user interface of a program: both what it looks like, and how it behaves. In QML, a user interface is specified as a tree of objects with properties.

This introduction is meant for those with little or no programming experience. JavaScript is used as a scripting language in QML, so you may want to learn a bit more about it (JavaScript: The Definitive Guide) before diving deeper into QML. It's also helpful to have a basic understanding of other web technologies like HTML and CSS, but it's not required.

Basic QML Syntax

QML looks like this:

 import Qt 4.7

 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 property: 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.

Expressions

In addition to assigning values to properties, you can also assign expressions written in JavaScript.

 Rotation {
     angle: 360 * 3
 }

These expressions can include references to other objects and properties, in which case a binding is established: when the value of the expression changes, the property the expression has been assigned to is automatically updated to that value.

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

In the example above, the text2 object will display the same text as text1. If text1 is changed, text2 is automatically changed to the same value.

Note that to refer to other objects, we use their id values. (See below for more information on the id property.)

QML Comments

Commenting in QML is similar to JavaScript.

  • Single line comments start with // and finish at the end of the line.
  • Multiline comments start with /* and finish with */
 import Qt 4.7

Comments are ignored by the engine. They are useful for explaining what you are doing; for referring back to at a later date, or for others reading your QML files.

Comments can also be used to prevent the execution of code, which is sometimes useful for tracking down problems.

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

In the above example, the Text object will have normal opacity, since the line opacity: 0.5 has been turned into a comment.

Properties

Property naming

Properties begin with a lowercase letter (with the exception of Attached Properties).

Property types

QML supports properties of many types (see QML Basic Types). The basic types include int, real, bool, string, color, and lists.

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

QML properties are what is known as typesafe. That is, they only allow you to assign a value that matches the property type. For example, the x property of item is a real, and if you try to assign a string to it you will get an error.

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

The id property

Each object can be given a special unique property called an id. No other object within the same QML document can have the same id value. Assigning an id enables the object to be referred to by other objects and scripts.

The first Rectangle element below has an id, "myRect". The second Rectange element defines its own width by referring to myRect.width, which means it will have the same width value as the first Rectangle element.

 Item {
     Rectangle {
         id: myRect
         width: 100
         height: 100
     }
     Rectangle {
         width: myRect.width
         height: 200
     }
 }

Note that an id must begin with a lower-case letter or an underscore, and cannot contain characters other than letters, numbers and underscores.

List properties

List properties look like this:

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

The list is enclosed in square brackets, with a comma separating the list elements. In cases where you are only assigning a single item to a list, you can omit the square brackets:

 Image {
     children: Rectangle {}
 }

Default properties

Each object type can specify one of its list or object properties as its default property. If a property has been declared as the default property, the property tag can be omitted.

For example this code:

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

can be simplified to:

 State {
     PropertyChanges {}
     PropertyChanges {}
 }

because changes is the default property of the State type.

Grouped Properties

In some cases properties form a logical group and use a 'dot' or grouped notation to show this.

Grouped properties can be written like this:

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

or like this:

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

In the element documentation grouped properties are shown using the 'dot' notation.

Attached Properties

Some objects attach properties to another object. Attached Properties are of the form Type.property where Type is the type of the element that attaches property.

For example:

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

The ListView element attaches the ListView.isCurrentItem property to each delegate it creates.

Another example of attached properties is the Keys element which attaches properties for handling key presses to any visual Item, for example:

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

Signal Handlers

Signal handlers allow actions to be taken in response to an event. For instance, the MouseArea element has signal handlers to handle mouse press, release and click:

 MouseArea {
     onPressed: console.log("mouse button pressed")
 }

All signal handlers begin with "on".

Some signal handlers include an optional parameter, for example the MouseArea onPressed signal handler has a mouse parameter:

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

Thank you for giving your feedback.

Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.

[0]; s.parentNode.insertBefore(ga, s); })();