QML Tutorial 1 - Value Types | Qt Quick | Qt 6.11.1

- Qt 6.11
- Qt Quick
- Qt Quick Examples and Tutorials
- QML Tutorial
- QML Tutorial 1 - Value Types
- Qt 6.11.1 Reference Documentation

QML Tutorial ◦ QML Components

# QML Tutorial 1 - Value 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

     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

### 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 qml 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:

     qml tutorials/helloworld/tutorial1.qml

QML Tutorial ◦ QML Components