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 thewidth
,height
andcolor
properties. The Rectangle type contains many other properties (such asx
andy
), 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
andfont.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
© 2022 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.