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

レイアウトは、サイズ変更可能なユーザーインターフェースを実現するための有効な手法です。しかし、ユーザビリティや美観を損なうことなくアイテムを無制限に縮小・拡大することはできないため、このアプローチには限界があります。 ある時点で、特定の要素を再配置したり、削除したり、追加したりする方が理にかなっている場合があります。さまざまなデバイス（例：スマートフォンやタブレット）や画面の向き（横向きまたは縦向き）への適応も、同様の方法で実装できます。これが一般的に「レスポンシブレイアウト」として理解されているものであり、Qt Quick のレイアウト機能は、それを実装するためのさまざまな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 のステートを使用しても、同じ結果を得ることができます。ステートを使用する利点は、特定のレイアウトの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 の「レイアウト - レスポンシブレイアウトの例」では、あるアイテムが異なる階層レベル間で移動され、あるレイアウトではFlickable 内に配置され、別のレイアウトでは最上位レベルに配置されるケースが示されています。その結果得られる2つのレイアウトは以下の通りです。

役立つリンク：デザインガイドラインを参照してください

多くのデザインガイドラインでは、レスポンシブレイアウトを作成するためのヒントやアドバイスが提供されています。前述のAPIを使用すれば、それぞれのテクニックを実装することが可能です。詳細については、以下のリンクを参照することをお勧めします：

• Apple ヒューマンインターフェースガイドライン
• Material3のレイアウト
• Microsoft Fluent レスポンシブデザインの手法