blob: 02a1095bcb7c140936b5b7ba07da7970d9e4587c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
.. _qmlbasictypes:
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.
.. figure:: declarative-tutorial1.png
:align: center
Here is the QML code for the application:
.. pysideinclude:: helloworld/tutorial1.qml
:snippet: 0
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:
.. pysideinclude:: helloworld/tutorial1.qml
:snippet: 3
Rectangle element
-----------------
.. pysideinclude:: helloworld/tutorial1.qml
:snippet: 1
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
------------
.. pysideinclude code/tutorial1.qml
:snippet: 2
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.
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`` of your Qt installation) 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 tutorial1.qml
[Previous :ref:`qmltutorial`][Next :ref:`qmlcomponents`]
|
