Qtクイック・レスポンシブ・レイアウト

レイアウトは、リサイズ可能なユーザーインターフェースを作るための良いテクニックです。しかし、この手法には限界があります。ユーザビリティと美観を犠牲にすることなく、アイテムを無制限に縮小したり拡大したりすることはできません。ある時点で、特定の要素を再編成したり、削除したり、追加したりする方が理にかなっています。異なるデバイス（携帯電話やテーブルなど）や画面の向き（横向きや縦向き）にも、同様に対応することができる。これは通常レスポンシブレイアウトとして理解されているもので、Qt Quick Layoutsはそれらを実装するための様々な API を提供しています。

静的階層、アダプティブレイアウト

レイアウトには階層があり、通常は宣言的なQMLコードによって定義されます。単純なレスポンシブレイアウトの場合、階層構造は変更せず、レイアウトに影響するプロパティを微調整するだけで十分です。

宣言的記述

レイアウトを変更する最もシンプルな方法は、レイアウトプロパティとLayout 付属プロパティを小さな式で変更することです。例えば、幅に応じてレイアウトを変更するために三項演算子を使用することができます。Item.visible 、インターフェイスの様々な部分を隠したり、表示したりするようなItem プロパティも同じように変更することができます。

以下のスニペットでは、ウィンドウ幅がある値より小さい場合、この概念を使用して2列レイアウトを1列レイアウトに変更しています。

GridLayout {
    columns: width < 300 ? 1 : 2
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

その結果、ウィンドウの幅に応じてレイアウトはこのようになります。

様々なレベルのレイアウトやアイテムを入れ子にすることができますが、Items はそのItem.parent 内でのみ移動することができます。

状態

Qt Quick States を使っても同じ結果を得ることができます。ステートを使用する利点は、特定のレイアウトのLayout プロパティが、QML ファイル内の 1 つのポイントに集められることです（少なくとも変更されるもの）。先に示した例は、以下のように実装することができます。

GridLayout {
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    states: [
        State {
            when: width < 300
            PropertyChanges { target: rectangle2; Layout.row: 1 }
            PropertyChanges { target: rectangle2; Layout.column: 0 }
        },
        State {
            when: width >= 300
            PropertyChanges { target: rectangle2; Layout.row: 0 }
            PropertyChanges { target: rectangle2; Layout.column: 1 }
        }
    ]
}

LayoutItemProxy

3つ目の方法は、LayoutItemProxy 。先に示した最小限の例の実装は、型ドキュメントにあります。先に示した解決策とは対照的に、LayoutItemProxy では、さまざまなフォームファクターに対応した、完全に独立したレイアウトを宣言することができます。特に、より複雑なレイアウトでは、これは合理的なソースコード構造を改善し、維持するために有用かもしれません。

LayoutItemProxy API は技術的なプレビューであり、将来の Qt バージョンで変更または削除される可能性があることに注意してください。

適応階層、適応レイアウト

より複雑なレイアウトの再構築には、階層の変更が必要になるかもしれません。小さなレイアウトの小さな独立したボタンは、他のボタンと組み合わされ、大きなレイアウトのボックスに入れられるかもしれません。あるレイアウトでは完全に表示されているアイテムが、別の小さなレイアウトではFlickable 。このようなシナリオでは、LayoutItemProxy を利用するのが最適です。LayoutItemProxy では、Items を様々な階層レベルや、異なるItem.parent 間で移動させることができます。

Qt Quick Layouts - レスポンシブ・レイアウトの例では、アイテムを異なる階層レベル間で移動させ、あるケースではFlickable 、別のレイアウトではトップレベルに置く場合を示しています。結果として、2つのレイアウトは以下のようになります。

役立つリンクデザインガイドラインを参照する

多くのデザインガイドラインは、レスポンシブレイアウトを作成するためのヘルプやヒントを提供しています。それぞれのテクニックを実装するには、上記のAPIを使用します。詳細については、以下のリンクをお勧めします：

• Appleヒューマンインターフェースガイドライン
• Material3 レイアウト
• Microsoft Fluent レスポンシブデザインテクニック