恒温器

这是一个使用 Qt Quick 实现的家用恒温器用户界面。它展示了如何创建可以从大桌面显示到移动和小型嵌入式显示缩放的响应式应用程序。

浅色主题	深色主题

恒温器展示了完全响应式的一个恒温器应用示例。此示例可以在Qt 设计工作室和Qt Creator中运行和编辑。它展示了如何根据窗口大小实现不同设计。

响应式设计

如上所述，该应用程序支持各种显示尺寸。当用户更改窗口大小时，它可以动态缩放，或者根据移动目标的可用显示选择正确的尺寸。在Constants.qml中已创建指定显示大小并控制当前使用哪个布局的属性来实现此行为。

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

在App.qml中，属性在应用程序启动时绑定到窗口的高度和宽度。

    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
        })
    }

接着使用这些状态来控制组件的属性，例如宽度、高度、字体大小、位置、布局（列或行）等。

    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
            }
        }
    ]

示例项目 @ code.qt.io