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.
[Missing image declarative-tutorial1.png]
Here is the QML code for the application:
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:
Rectangle element
We declare a root element 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 element contains many other properties (such as x
and y
), but these are left at their default values.
Text element
We add a Text element as a child of the root Rectangle element 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 element. In this case, we specify that our text element 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 Viewer 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:
bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml