恒温器

恒温器示例演示了如何根据窗口大小实现不同的设计。

这是一个家用恒温器的用户界面，演示了如何在Qt Quick 中创建可从大型桌面显示屏扩展到移动显示屏和小型嵌入式显示屏的响应式应用程序。

轻型宽屏更窄的轻型屏幕深色宽屏深色窄屏

手机竖屏上的轻型 UI 主题手机横屏上的轻型 UI 主题

桌面屏幕上的轻型用户界面主题

手机竖屏上的暗色 UI 主题

桌面屏幕上的暗色用户界面主题

运行示例

运行示例 Qt Creator，打开Welcome 模式，并从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

响应式设计

应用程序支持各种显示尺寸。Constants.qml 包含指定显示尺寸和控制当前使用的布局的属性：

    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

在App.qml 中，这些属性在应用程序启动时与窗口高度和宽度绑定：

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

然后，这些状态将用于控制组件的属性，如宽度、高度、字体大小、位置和布局（列或行）。

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

源文件

示例项目 @ code.qt.io

另请参阅 所有 Qt XML 示例和Qt Quick 示例与教程。

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