blob: 1535c42f4bf735feb0c02768714319879efae676 (
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
/*!
\page tutorial2.html
\title Tutorial 2 - Some colors
\target tutorial2
This chapter adds a color picker to change the color of the text.
\image declarative-tutorial2.png
Our color picker is made of many cells with different colors. To avoid writing the same code many times, we first create a new \c Cell component with a color property (see \l components).
Here is the QML code for \c Cell.qml:
\code
Item {
id: CellContainer
width: 40
height: 25
properties: Property {
name: "color"
}
Rect {
anchors.fill: parent
color: CellContainer.color
}
MouseRegion {
anchors.fill: parent
onClicked: { HelloText.color = CellContainer.color }
}
}
\endcode
Then, we use our \c Cell component to create the color picker in the QML code for the application:
\code
Rect {
id: Page
width: 480
height: 200
color: "LightGrey"
Text {
id: HelloText
text: "Hello world!"
font.size: 24
font.bold: true
y: 30
anchors.horizontalCenter: Page.horizontalCenter
}
GridLayout {
id: ColorPicker
x: 0
anchors.bottom: Page.bottom
width: 120; height: 50
rows: 2; columns: 3
Cell { color: "#ff0000" }
Cell { color: "#00ff00" }
Cell { color: "#0000ff" }
Cell { color: "#ffff00" }
Cell { color: "#00ffff" }
Cell { color: "#ff00ff" }
}
}
\endcode
\section1 Walkthrough
\section2 The Cell Component
\code
Item {
id: CellContainer
width: 40
height: 25
}
\endcode
The root element of our component is an \c Item. It is the most basic 'Fx' element in Qml and is often used as a container for other elements.
\code
properties: Property {
name: "color"
}
\endcode
We declare a \c color property. This property is accessible from \e outside our component, this allows us to instantiate the cells with different colors.
\code
Rect {
anchors.fill: parent
color: CellContainer.color
}
\endcode
Our cell component is basically a colored rectangle.
The \c anchors.fill property is a convenient way to set the size of an element. In this case the \c Rect will have the same size as its parent.
We bind the \c color property of this \c Rect to the color property of our component.
\code
MouseRegion {
anchors.fill: parent
onClicked: { HelloText.color = CellContainer.color }
}
\endcode
In order to change the color of the text when clicking on a cell, we create a \c MouseRegion element with the same size as its parent.
The \c onClicked property sets the \c color property of the element named \e HelloText to our cell color.
\section2 The main QML file
\code
GridLayout {
id: ColorPicker
x: 0
anchors.bottom: Page.bottom
width: 120; height: 50
rows: 2; columns: 3
Cell { color: "#ff0000" }
Cell { color: "#00ff00" }
Cell { color: "#0000ff" }
Cell { color: "#ffff00" }
Cell { color: "#00ffff" }
Cell { color: "#ff00ff" }
}
\endcode
In the main QML file, the only thing we have to do is to create a color picker by putting 6 cells with different colors in a grid layout.
[Previous: \l tutorial1] [Next: \l tutorial3]
*/
|
