qiurui
/
qtdoc
mirror of https://github.com/qt/qtdoc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Doc: Revise Thermostat example 

* Add relevant section headers.
* Replace \table with \tabs to make the example more compact and
  readable.

Fixes: QTBUG-137968
Pick-to: 6.10 6.9 6.8 6.5
Change-Id: I9bdf3874611dbe6a6f909317b5c20544a990beb4
Reviewed-by: Andreas Eliasson <andreas.eliasson@qt.io>
This commit is contained in:
Andreas Eliasson 2025-09-04 13:29:44 +02:00
parent f3cfde98ff
commit 7cfde3e5c6
1 changed files with 60 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
examples/demos/thermostat/doc/src/thermostat.qdoc
View File

@ -7,47 +7,86 @@
\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.
\brief The \e{Thermostat} example demonstrates how to implement different
designs depending on the window size.
\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
A user interface for a home thermostat, demonstrating how to create
responsive applications in Qt Quick that scale from large desktop displays
to mobile and small embedded displays.
\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{\QC Documentation}{\QC}.
It shows how to implement different designs depending on the window size.
\if defined(onlinedocs)
\tab {thermostat}{light-wider}{Light wider screen}{}
\tab {thermostat}{light-narrower}{Light narrower screens}{checked}
\tab {thermostat}{dark-wider}{Dark wider screen}{}
\tab {thermostat}{dark-narrower}{Dark narrower screens}{}
\tabcontent {light-narrower}
\else
\section1 Light narrower screens
\endif
\inlineimage {mobile_light.png} {Light UI theme on mobile vertical screen}
\inlineimage {small_light.png} {Light UI theme on mobile horizontal screen}
\if defined(onlinedocs)
\endtabcontent
\tabcontent {light-wider}
\else
\section1 Light wider screen
\endif
\inlineimage {desktop_light.png} {Light UI theme on desktop screen}
\if defined(onlinedocs)
\endtabcontent
\tabcontent {dark-narrower}
\else
\section1 Dark narrower screens
\endif
\inlineimage {mobile_dark.png} {Dark UI theme on mobile vertical screen}
\inlineimage {small_dark.png} {Dark UI theme on mobile vertical screen}
\if defined(onlinedocs)
\endtabcontent
\tabcontent {dark-wider}
\else
\section1 Dark wider screens
\endif
\inlineimage {desktop_dark.png} {Dark UI theme on desktop screen}
\if defined(onlinedocs)
\endtabcontent
\endif
\include examples-run.qdocinc
\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.
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.
\c Constants.qml contains properties that specify the display size and
control which layout is currently in use:
\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. They are mutually exclusive.
In \c App.qml, the properties are bound to the window height and width at
application startup:
\quotefromfile demos/thermostat/content/App.qml
\skipto Component.onCompleted
\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.
The states are then used to control the components' properties, such as
width, height, fontSize, position, and layout (column or row).
\quotefromfile demos/thermostat/content/StatisticsScrollViewForm.ui.qml
\skipto states
\printuntil ]
\section1 Source files
\sa {All Qt Examples}, {Qt Quick Examples and Tutorials}
*/