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

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

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

例の実行

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

アイテムの作成

LayoutItemProxy タイプでは、同時に表示できるレイアウトは 1 つだけですが、同じアイテムを異なるレイアウトで使用できます。これは、ウィンドウやスクリーンサイズに適応するレスポンシブ・レイアウトを作成するために使用できます。

まず、ある時点でUIに表示されるすべてのアイテムを定義する必要があります。単純な矩形にテキストを追加したAnnotatedRectを使います。

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

    GridLayout {
        anchors.fill: parent
        id: grid
        columns: 2
        anchors.margins: 8
        Repeater {
            model: 18
            Rectangle {
                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: index
                }
            }
        }
    }
}

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 を使って様々なレイアウトを宣言することができます。1つのレイアウトは次のように定義できます。

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 によって自動的に非表示になります。もう一つの使い方は、LayoutItemProxy をFlickable のコンテンツとして設定することで示されます。

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

RowLayout {
    id: largeLayout
    anchors.fill: parent
    ColumnLayout {
        Layout.minimumWidth: 100
        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: false
        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

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