blob: a4bf1a1f8286b2dc739c609172e8259d26fe1b56 (
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
|
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\title Qt Quick Demo - Clocks
\ingroup qtquickdemos
\example demos/clocks
\brief A QML clock application that demonstrates using a ListView type to
display data generated by a ListModel and a SpringAnimation type to animate
images.
\image qtquick-demo-clocks-small.png
\e Clocks demonstrates using a ListView type to display data generated by a
ListModel. The delegate used by the model is specified as a custom QML type
that is specified in the Clock.qml file.
JavaScript methods are used to fetch the current time in several cities in
different time zones and QML types are used to display the time on a clock
face with animated clock hands.
\include examples-run.qdocinc
\section1 Displaying Data Generated by List Models
In the clocks.qml file, we use a \l Rectangle type to create the application
main window:
\quotefromfile demos/clocks/clocks.qml
\skipto Rectangle
\printuntil color
We use a ListView type to display a list of the items provided by a
ListModel type:
\printuntil Los Angeles
\printuntil }
\printuntil }
List elements are defined like other QML types except that they contain a
collection of \e role definitions instead of properties. Roles both define
how the data is accessed and include the data itself.
For each list element, we use the \c cityName role to specify the name of a
city and the \c timeShift role to specify a time zone as a positive or
negative offset from UTC (coordinated universal time).
The Clock custom type is used as the ListView's \c delegate, defining the
visual appearance of list items. To use the Clock type, we add an import
statement that imports the folder called \c content where the type is
located:
\quotefromfile demos/clocks/clocks.qml
\skipto content
\printuntil "
We use an \l Image type to display arrows that indicate whether users can
flick the view to see more clocks on the left or right:
\quotefromfile demos/clocks/clocks.qml
\skipto Image
\printuntil /^\}/
We use the \c opacity property to hide the arrows when the list view is
located at the beginning or end of the x axis.
In Clock.qml, we define a \c timeChanged() function in which we use
methods from the JavaScript \c Date object to fetch the current time in
UTC and to adjust it to the correct time zone:
\quotefromfile demos/clocks/content/Clock.qml
\skipto timeChanged
\printuntil }
We use a \l Timer type to update the time at intervals of 100 milliseconds:
\printuntil }
We use \l Image types within an \l Item type to display the time on an
analog clock face. Different images are used for daytime and nighttime
hours:
\printuntil clock-night.png
A \l Rotation transform applied to \l Image types provides a way to rotate
the clock hands. The \c origin property holds the point that stays fixed
relative to the parent as the rest of the item rotates. The \c angle
property determines the angle to rotate the hands in degrees clockwise.
\printuntil center.png
\printuntil }
We use a \l Behavior type on the \c angle property to apply a
SpringAnimation when the time changes. The \c spring and \c damping
properties enable the spring-like motion of the clock hands, and a
\c modulus of \c 360 makes the animation target values wrap around at a
full circle.
We use a \l Text type to display the city name below the clock:
\printuntil }
\sa {QML Applications}
*/
|
