サーモスタット

サーモスタットの例は、ウィンドウのサイズに応じて異なるデザインを実装する方法を示しています。

家庭用サーモスタットのユーザーインターフェイスで、Qt Quick 、大きなデスクトップディスプレイからモバイルや小さな組み込みディスプレイまで対応するレスポンシブアプリケーションを作成する方法を示しています。

より明るいワイドスクリーン軽くて狭いスクリーン暗いワイド画面暗くて狭いスクリーン

モバイル縦画面での軽いUIテーマモバイル横画面でのライトUIテーマ

デスクトップ画面のライトUIテーマ

モバイル縦画面でのダークUIテーマ

デスクトップ画面のダークUIテーマ

例の実行

から例を実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Qt Creator:Tutorialを参照してください：ビルドして実行する。

レスポンシブデザイン

このアプリケーションは様々なディスプレイサイズに対応しています。ユーザーがウィンドウ・サイズを変更したときに動的に拡大縮小したり、モバイル・ターゲットで利用可能なディスプレイに基づいてアプリケーションが正しいサイズを選択したりします。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
        })
    }

そして、その状態は、幅、高さ、fontSize、位置、レイアウト（列または行）などのコンポーネントのプロパティを制御するために使用されます。

    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 のサンプルと 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.