Thermostat
The Thermostat example demonstrates how to implement different designs depending on the window size.
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.
Running the Example
To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.
Responsive Design
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. Constants.qml contains properties that specify the display size and control which layout is currently in use:
property bool isBigDesktopLayout: layout === Constants.Layout.Desktop property bool isSmallDesktopLayout: layout === Constants.Layout.SmallDesktop property bool isMobileLayout: layout === Constants.Layout.Mobile property bool isSmallLayout: layout === Constants.Layout.Small
In App.qml, the properties are bound to the window height and width at application startup:
Component.onCompleted: { Constants.layout = Qt.binding(() => { let tall = window.height >= window.width if (window.width >= 1440 && window.height >= 520) return Constants.Layout.Desktop if (window.width >= 1024 && window.height >= 768) return Constants.Layout.SmallDesktop if (tall || (window.width >= 600 && window.height >= 380)) return Constants.Layout.Mobile return Constants.Layout.Small }) }
The states are then used to control the components' properties, such as width, height, fontSize, position, and layout (column or row).
states: [ State { name: "bigDesktopLayout" when: Constants.isBigDesktopLayout PropertyChanges { target: statistics leftPadding: 53 rightPadding: 53 topPadding: 23 bottomPadding: 43 } PropertyChanges { target: scrollView isBackgroundVisible: false delegateWidth: 350 delegateHeight: 182 statisticsChartWidth: grid.width statisticsChartHeight: 647 } PropertyChanges { target: grid width: 1100 } }, State { name: "smallDesktopLayout" when: Constants.isSmallDesktopLayout PropertyChanges { target: statistics leftPadding: 53 rightPadding: 53 topPadding: 23 bottomPadding: 43 } PropertyChanges { target: scrollView isBackgroundVisible: false delegateWidth: 290 delegateHeight: 182 statisticsChartWidth: grid.width statisticsChartHeight: 541 } PropertyChanges { target: grid width: 918 } }, State { name: "mobileLayout" when: Constants.isMobileLayout PropertyChanges { target: statistics leftPadding: 0 rightPadding: 0 topPadding: 0 bottomPadding: 0 } PropertyChanges { target: scrollView isBackgroundVisible: false delegateWidth: 327 delegateHeight: 110 statisticsChartWidth: 346 statisticsChartHeight: 383 } }, State { name: "smallLayout" when: Constants.isSmallLayout PropertyChanges { target: statistics leftPadding: 0 rightPadding: 0 topPadding: 0 bottomPadding: 0 } PropertyChanges { target: scrollView isBackgroundVisible: true delegateWidth: 332 delegateHeight: 90 statisticsChartWidth: 420 statisticsChartHeight: 240 } } ]
Source files
See also All Qt Examples and Qt Quick Examples and Tutorials.
© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
