blob: e6232affb7ee0536d04d9c52f9150c015408cdf3 (
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
67
68
69
70
71
72
73
74
75
76
77
78
|
/*!
\page tutorial1.html
\target tutorial1
\title Tutorial 1 - Hello World!
This first program is a simple "Hello world" example. The picture below is a screenshot of this program.
\image declarative-tutorial1.png
Here is the QML code for the application:
\code
Rectangle {
id: Page
width: 480
height: 200
color: "LightGrey"
Text {
id: HelloText
text: "Hello world!"
font.pointSize: 24
font.bold: true
y: 30
anchors.horizontalCenter: Page.horizontalCenter
}
}
\endcode
\section1 Walkthrough
\section2 Rectangle element
\code
Rectangle {
id: Page
width: 480
height: 200
color: "LightGrey"
}
\endcode
First, we declare a root element of type \l 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 \e Page. We also set the \c width, \c height and \c color properties.
The \l Rectangle element contains many other properties (such as \c x and \c y), but these are left at their default values.
\section2 Text element
\code
Text {
id: HelloText
text: "Hello world!"
font.pointSize: 24
font.bold: true
y: 30
anchors.horizontalCenter: Page.horizontalCenter
}
\endcode
We add a text element as a child of our root element to display the text 'Hello world!'.
The \c y property is used to position the text vertically at 30 pixels from the top of its parent.
The \c font.pointSize and \c font.bold properties are related to fonts and use the \e 'dot' notation.
The \c 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 \e Page element.
\section2 Viewing the example
To view what you have created, run the qmlviewer (located in the \c 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:
\code
bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/t1/tutorial1.qml
\endcode
[\l tutorial] [Next: \l tutorial2]
*/
|
