Back to Qt.io
Contact Us Blog Download Qt
このページでは

Qt Quick レイアウト - レスポンシブレイアウトの例

LayoutItemProxy を使用してレスポンシブ UI を作成する方法を示します。

この例では、LayoutProxyItemsをレイアウトと組み合わせて、レスポンシブなレイアウトを作成する方法を示します。

例の動作確認

以下の手順でサンプルを実行できます：

アイテムの作成

LayoutItemProxy 型を使用すると、異なるレイアウトで同じアイテムを使用できます（ただし、同時に表示できるレイアウトは 1 つだけです）。これにより、ウィンドウや画面サイズに合わせて適応するレスポンシブなレイアウトを作成できます。

レスポンシブレイアウトを示す2つのウィンドウ：コンパクトグリッドの狭い表示と、サイドバー付きの広い表示

まず、UIのどこかに表示されるべきすべてのアイテムを定義する必要があります。ここでは、テキストが追加されたシンプルな矩形である AnnotatedRect を使用します。

Rectangle {
    id: contentItem
    Layout.fillWidth: true
    implicitHeight: grid.implicitHeight
    implicitWidth: grid.implicitWidth
    color: "#00414A"

    GridLayout {
        id: grid
        anchors {
            fill: parent
            margins: 8
        }
        columns: Math.max(1, Math.min(Math.round(width / 130), 6))
        Repeater {
            model: 60
            delegate: Rectangle {
                required property int index
                Layout.fillWidth: true
                Layout.margins: 8
                implicitWidth: 200
                implicitHeight: width
                radius: width / 10
                gradient: Gradient {
                    GradientStop { position: -0.2; color: "#2CDE85" }
                    GradientStop { position: 1.2; color: "#00414A" }
                }
                Text {
                    color: "#ffffff"
                    font.pointSize: 22
                    anchors.centerIn: parent
                    text: parent.index + 1
                }
            }
        }
    }
}

Button {
    id: a
    text: "Text"
    icon.source: "./icons/text.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: b
    text: "Grid 1"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: c
    text: "Grid 2"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: d
    text: "Settings"
    icon.source: "./icons/settings.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

レイアウトの作成

LayoutItemProxies を使用して、先に宣言したアイテムを対象としたさまざまなレイアウトを宣言できます。単一のレイアウトは次のように定義できます。

ColumnLayout {
    id: smallLayout
    anchors.fill: parent

    Flickable {
        Layout.fillHeight: true
        Layout.fillWidth: true
        contentWidth: width
        contentHeight: gl.implicitHeight
        clip: true
        ScrollIndicator.vertical: ScrollIndicator { }
        LayoutItemProxy {
            id: gl
            width: parent.width
            height: implicitHeight
            target: contentItem
        }
    }

    RowLayout {
        Layout.fillHeight: false
        Layout.fillWidth: true
        Layout.margins: 5
        LayoutItemProxy{ target: a; }
        LayoutItemProxy{ target: b; }
        LayoutItemProxy{ target: c; }
    }
}

このスニペットは、LayoutItemProxy の使用方法を複数示しています。最も簡単な方法は、ここにあるRowLayout のように、LayoutItemProxies をレイアウトに追加することです。 さらに、LayoutProxyItemに追加のLayout アタッチドプロパティを設定することで、その特定のレイアウト内でのみターゲットアイテムに影響を与えるようにしています。また、アイテムd は最初のレイアウトでは使用されていませんが、2番目のレイアウトではLayoutItemProxy によって自動的に非表示にされています。別の使用方法として、Flickable のコンテンツとしてLayoutItemProxy を設定する方法があります。

別のレイアウトは次のように宣言されます。

RowLayout {
    id: largeLayout
    anchors.fill: parent
    ColumnLayout {
        Layout.minimumWidth: 100
        Layout.fillWidth: true
        Layout.margins: 2
        LayoutItemProxy{ target: a }
        LayoutItemProxy{ target: b }
        LayoutItemProxy{ target: c }
        Item { Layout.fillHeight: true }
        LayoutItemProxy{ target: d }
    }

    LayoutItemProxy {
        Layout.fillHeight: true
        Layout.fillWidth: true
        target: contentItem
    }
}

ここでは、LayoutItemProxies を、同じ階層レベルにある実際のItems と併用できることを示しています。一般的に、LayoutItemProxy は柔軟性が高く、アイテムやレイアウトのネスト構造を許可しています。

レイアウトの設定

「smallLayout 」と「largeLayout 」という 2 つのレイアウトを定義した後、アプリケーションの現在のサイズに適したレイアウトの設定に進みます。この処理のために、ウィンドウの初期化時および幅が変更されるたびに呼び出す新しい関数を定義します。

function setFittingLayout() {
    if (width < 450) {
        smallLayout.visible = true
        largeLayout.visible = false
    } else {
        smallLayout.visible = false
        largeLayout.visible = true
    }
}
onWidthChanged: setFittingLayout()
Component.onCompleted: setFittingLayout()

初期化後にこの関数を呼び出す代わりに、宣言型コード内で、初期サイズに適したレイアウト以外のすべてを非表示にすることも可能です。

サンプルプロジェクト @ code.qt.io

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