Thermostat

Eine Benutzeroberfläche für ein Heimthermostat, implementiert in Qt Quick. Sie zeigt, wie man responsive Anwendungen erstellt, die von großen Desktop-Displays auf mobile und kleine eingebettete Displays skalieren.

Helles Thema	Dunkles Thema

Thermostat demonstriert eine Beispielanwendung für ein Thermostat, die vollständig reaktionsfähig ist. Das Beispiel kann sowohl auf dem Desktop als auch auf dem Handy ausgeführt und bearbeitet werden. Qt Design Studio und Qt Creator. Es zeigt, wie man je nach Fenstergröße unterschiedliche Designs implementieren kann.

Reaktionsfähiges Design

Die Anwendung kann dynamisch skaliert werden, wenn der Benutzer die Fenstergröße ändert, oder die Anwendung wählt die richtigen Größen auf der Grundlage der verfügbaren Anzeige auf mobilen Zielgeräten. Um dieses Verhalten zu erreichen, wurden in Constants.qml Eigenschaften erstellt, die die Anzeigegröße angeben und steuern, welches Layout gerade verwendet wird.

    property bool isBigDesktopLayout: true
    property bool isSmallDesktopLayout: false
    property bool isMobileLayout: false
    property bool isSmallLayout: false

In App.qml wurden die Eigenschaften beim Start der Anwendung an die Höhe und Breite des Fensters gebunden.

    Component.onCompleted: function() {
        Constants.isBigDesktopLayout = Qt.binding( function(){
            return window.width >= Constants.width && window.width >= window.height
        })
        Constants.isSmallDesktopLayout = Qt.binding( function(){
            return window.width >= 647 && window.width < Constants.width && window.width >= window.height
        })
        Constants.isMobileLayout = Qt.binding( function(){
            return window.width < window.height
        })
        Constants.isSmallLayout = Qt.binding( function(){
            return window.width < 647 && window.width >= window.height
        })
    }

Die Zustände werden dann verwendet, um die Eigenschaften der Komponente wie Breite, Höhe, fontSize, Position, Layout (Spalte oder Zeile), etc. zu steuern.

    states: [
        State {
            name: "desktopLayout"
            when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
            PropertyChanges {
                target: statistics
                leftPadding: 53
                rightPadding: 53
                topPadding: 23
                bottomPadding: 43
            }
            PropertyChanges {
                target: scrollView
                isBackgroundVisible: false
                delegateWidth: 350
                delegateHeight: 182
                statisticsChartWidth: 1098
                statisticsChartHeight: 647
            }
        },
        State {
            name: "mobileLayout"
            when: Constants.isMobileLayout
            PropertyChanges {
                target: statistics
                leftPadding: 0
                rightPadding: 0
                topPadding: 0
                bottomPadding: 43
            }
            PropertyChanges {
                target: scrollView
                isBackgroundVisible: false
                delegateWidth: 327
                delegateHeight: 100
                statisticsChartWidth: 327
                statisticsChartHeight: 383
            }
        },
        State {
            name: "smallLayout"
            when: Constants.isSmallLayout
            PropertyChanges {
                target: statistics
                leftPadding: 0
                rightPadding: 0
                topPadding: 0
                bottomPadding: 43
            }
            PropertyChanges {
                target: scrollView
                isBackgroundVisible: true
                delegateWidth: 332
                delegateHeight: 80
                statisticsChartWidth: 401
                statisticsChartHeight: 280
            }
        }
    ]

Beispielprojekt @ code.qt.io

© 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.