サーモスタット

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

明るいテーマ	ダークテーマ

Thermostatは、完全にレスポンシブなサーモスタット・アプリケーションのサンプルです。このサンプルは、Qt Design Studioと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
        })
    }

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

    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

©2024 The Qt Company Ltd. 本書に含まれるドキュメントの著作権は、それぞれの所有者に帰属します。ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。