blob: 6ab60e655e257970b4cae94f8dfaea5d01f6a280 (
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
|
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\title Thermostat
\examplecategory {Application Examples}
\examplecategory {Embedded}
\ingroup qtquickdemos
\example demos/thermostat
\brief A user interface for a home thermostat, implemented in Qt Quick. It demonstrates how to create responsive applications that scale from large desktop displays to mobile and small embedded displays.
\meta {tag} {demo,quick,charts,emdedded}
\meta {docdependencies} {QtCharts}
\table
\header
\li Light theme
\li Dark theme
\row
\li \inlineimage small_light.png
\li \inlineimage small_dark.png
\row
\li \inlineimage mobile_light.png
\li \inlineimage mobile_dark.png
\row
\li \inlineimage desktop_light.png
\li \inlineimage desktop_dark.png
\endtable
\e{Thermostat} demonstrates a sample thermostat application that is fully responsive. The example can be run and edited in both \l{Qt Design Studio} and \l{Qt Creator}.
It shows how to implement different designs depending on the window size.
\section1 Responsive Design
As mentioned above, the application has support for a variety of display sizes.It can scale dynamically when the user changes the window size, or the application will select the correct sizes based on the available display on mobile targets.
Properties that specify the display size and control which layout is currently in use have been created in \c Constants.qml to achieve this behavior.
\quotefromfile demos/thermostat/imports/Thermostat/Constants.qml
\skipto isBigDesktopLayout
\printuntil isSmallLayout
In \c App.qml, the properties were bound to the window height and width at application startup.
\quotefromfile demos/thermostat/content/App.qml
\skipto Component.onCompleted
\printuntil Constants.isSmallLayout
\printuntil }
\printuntil }
The states are then used to control the properties of the component such as width, height, fontSize, position, layout (column or row), etc.
\quotefromfile demos/thermostat/content/StatisticsScrollViewForm.ui.qml
\skipto states
\printuntil ]
*/
|
