Qt 5.6 | Qt Quick | QML Tutorial 1 - Basic Types

Qt 5.6.3 Reference Documentation

QML Tutorial ◦ QML Tutorial 2 - QML Components

# QML Tutorial 1 - Basic Types

This first program is a very simple "Hello world" example that introduces some basic QML concepts. The picture below is a screenshot of this program.

Here is the QML code for the application:

      import QtQuick 2.0

      Rectangle {
          id: page
          width: 320; height: 480
          color: "lightgray"

          Text {
              id: helloText
              text: "Hello world!"
              y: 30
              anchors.horizontalCenter: page.horizontalCenter
              font.pointSize: 24; font.bold: true
          }
      }

## Walkthrough

### Import

First, we need to import the types that we need for this example. Most QML files will import the built-in QML types (like Rectangle, Image, ...) that come with Qt, using:

      import QtQuick 2.0

### Rectangle Type

      Rectangle {
          id: page
          width: 320; height: 480
          color: "lightgray"

We declare a root object of type Rectangle. It is one of the basic building blocks you can use to create an application in QML. We give it an `id` to be able to refer to it later. In this case, we call it "page". We also set the `width`, `height` and `color` properties. The Rectangle type contains many other properties (such as `x` and `y`), but these are left at their default values.

### Text Type

          Text {
              id: helloText
              text: "Hello world!"
              y: 30
              anchors.horizontalCenter: page.horizontalCenter
              font.pointSize: 24; font.bold: true
          }

We add a Text type as a child of the root Rectangle type that displays the text 'Hello world!'.

The `y` property is used to position the text vertically at 30 pixels from the top of its parent.

The `anchors.horizontalCenter` property refers to the horizontal center of an type. In this case, we specify that our text type should be horizontally centered in the page element (see Anchor-Based Layout).

The `font.pointSize` and `font.bold` properties are related to fonts and use the dot notation.

### Viewing the example

To view what you have created, run the qmlscene tool (located in the `bin` directory) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type:

      qmlscene tutorials/helloworld/tutorial1.qml