Qt Quick レイアウトの概要

Qt Quick のレイアウトを使用して、ユーザーインターフェース内の項目を配置します。Qt Quick のレイアウトは項目のサイズを自動的に調整するため、サイズ変更可能なユーザーインターフェースに最適です。

主な機能

Qt Quick レイアウトの主な機能には、次のようなものがあります：

• Align Layout.alignment プロパティを持つアイテム。
• `resizable items `は、`Layout.fillWidth `および`Layout.fillHeight `プロパティで指定します。
• Layout.minimumWidth 、Layout.preferredWidth 、およびLayout.maximumWidth プロパティを使用してサイズ制約を設定します。「Width」を「Height」に置き換えることで、高さについても同様の制約を指定できます。
• spacing は、spacing 、rowSpacing 、またはcolumnSpacing で指定できます。
• stretch factors を使用すると、項目を水平方向と垂直方向の両方に伸縮させることができます。

さらに、GridLayout には以下の機能が追加されています：

• Grid coordinatesこれらは、Layout.row およびLayout.column プロパティによって制御されます。
• Automatic grid coordinates flow 、 、および プロパティと組み合わせて使用します。rows columns
• Spans 行または列全体にわたり、Layout.rowSpan およびLayout.columnSpan プロパティで指定できます。

はじめに

Qt Quick のレイアウトを使用するには、.qml ファイルに以下のimport文を記述して、QMLタイプをアプリケーションにインポートしてください：

import QtQuick.Layouts

次のステップは、簡単なレイアウトを作成することです。「Qt Quick レイアウト - 基本例」を参照することもできます。

簡単なレイアウト

レイアウトを使用する目的は、レイアウトのサイズが変更されるたびに、その子要素の配置を再調整することにあります。つまり、アプリケーション側でレイアウトのサイズ変更を確実に実行する必要があります。以下のコードスニペットでは、RowLayoutが anchors.fill: parent を指定することでこれを保証しています。ただし、width やheight プロパティを指定するなど、他の方法でもこれを実現できます。 同じスニペットでは、オレンジ色の Rectangleは100×150ピクセルの固定サイズになっており、プラム色の Rectangleは割り当てられたスペース全体を占めるように拡大します。

Window {
    RowLayout {
        anchors.fill: parent
        spacing: 6
        Rectangle {
            color: 'azure'
            Layout.preferredWidth: 100
            Layout.preferredHeight: 150
        }
        Rectangle {
            color: "plum"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

レイアウトは、子要素のジオメトリを管理します。これには、width 、height 、x 、y 、anchors ）などのプロパティが含まれます。

間隔

前のスニペットで示されているように、RowLayoutのスペースは6に設定されています。これにより、レイアウト内のすべてのアイテム間に6ピクセルのスペースが確保されます：

spacing: 6

間隔の値を指定しない場合、レイアウトはデフォルト値である5ピクセルを使用します。この間隔は、子要素のimplicitWidthと同様に、レイアウトのimplicitWidthの算出に寄与します。デフォルトの挙動に依存する場合は、これがレイアウトのデザインに影響を与える可能性があるため、この点を念頭に置いておくことが重要です。例えば、以下のスニペットにある2つの ColumnLayoutは、次のスニペットでどちらも`Layout.fillWidth: true` に設定されています。両方が同じ幅になると思うのが自然でしょう。しかし、内側の`RowLayout` 内のアイテム間にデフォルトで 5 ピクセルの間隔があるため、最初の`ColumnLayout`の`implicitWidth`が大きくなり、2番目の `ColumnLayout` に割り当てられるスペースが少なくなります。 例：

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    RowLayout {
        anchors.fill: parent
        ColumnLayout {
            Rectangle {
                color: "tomato";
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            RowLayout {
                Rectangle {
                    color: "navajowhite"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
                Rectangle {
                    color: "darkseagreen"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
        }
        ColumnLayout {
            Rectangle {
                color: "lightpink"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "slategray"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "lightskyblue"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }
}

このスニペットでは、次のようなレイアウトが生成されます:

これら2つの列のサイズを均等に保つには、次のいずれかの方法があります。

1. RowLayoutの間隔を0 に設定するか、
2. 両方の ColumnLayout。

推奨サイズの指定

各アイテムについて、有効な推奨サイズは、いくつかの候補プロパティのいずれかから得られる場合があります。有効な推奨サイズを決定するために、アイテムはこれらの候補プロパティを以下の順序で照会し、有効な幅または高さを示す最初の候補を使用します。

アイテムは、Layout.preferredHeight を指定しなくてもLayout.preferredWidth を指定することができます。そのような場合、有効な優先高さはimplicitHeight から決定されます。

サイズ制約

アイテムはレイアウトによってサイズ変更される可能性があるため、レイアウトは、Layout.fillWidth またはLayout.fillHeight がtrue に設定されているすべてのアイテムのminimum 、preferred 、およびmaximum のサイズを把握しておく必要があります。

preferred の幅と高さは、レイアウト自体が特定のサイズに縛られていない場合、アイテムの実際の幅と高さです。レイアウトが特定のサイズに設定されている場合、最小サイズと最大サイズを考慮しつつ、アイテムの の比率に基づいて余分なスペースを配分します。 すべてのアイテムでfillWidthおよびfillHeight が設定されている場合、優先サイズと暗黙のサイズは比率および重みとして機能します。

たとえば、以下のコードでは、横方向に伸びる2つの長方形が並んだレイアウトが生成されます。オレンジ色の Rectangleは 50x150 から 300x150 まで、プラム色の Rectangleは 100x100 から ∞x100 までサイズ変更可能です。 各アイテムの最小幅および最大幅を超えない限り、プラム色の長方形はオレンジ色の長方形の 2 倍の幅になります。

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'orange'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

各アイテムの制約を組み合わせると、レイアウト要素には以下の暗黙の制約が課されます：

したがって、子項目の制約を破ることなく、レイアウトの幅を156より狭くしたり、高さを150より高くしたり低くしたりすることはできません。

ウィンドウとレイアウトの連携

通常のアンカー設定の概念を利用することで、レイアウトがウィンドウのサイズ変更に追従するようにすることができます。

RowLayout {
    id: layout
    anchors.fill: parent

レイアウトのサイズ制約を利用することで、ウィンドウがレイアウトの制約範囲を超えてリサイズされないようにすることができます。 レイアウトのサイズ制約を取得し、Window 要素のminimumWidth、minimumHeight、maximumWidth、maximumHeightにこれらの制約を設定することができます。以下のコードは、ウィンドウのサイズ変更がレイアウトの制約の範囲を超えることがないようにします：

minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight

最後に、ウィンドウの初期サイズをレイアウトの暗黙的なサイズに設定します:

width: layout.implicitWidth
height: layout.implicitHeight

アイテムのスパンおよびストレッチ

GridLayout 内でspans を使用すると、子アイテムが複数のセルを占有するようになります。たとえば、2行にまたがって6つのセルを持つGridLayout がある場合を考えます。 上段には、アイテム「item1」、「item2」、「item3」が含まれています。下段には、columnSpan: 3およびalignment: Qt.AlignHCenter を指定したアイテム「item4」が含まれています。これにより、item4 は下段を構成する 3 つのセルの中央に配置されます。以下のスニペットを例としてご覧ください：

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    GridLayout {
       rows: 2
       columns: 3
       Rectangle {
           color: 'cyan'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'magenta'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'yellow'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'black'
           implicitWidth: 50
           implicitHeight: 50
           Layout.columnSpan: 3
           Layout.alignment: Qt.AlignHCenter
       }
    }
}

行と列のサイズは、その内容によって暗黙的に決定されます。 たとえば、Buttonは、それが配置されている列の幅や、行の高さに影響を与える可能性があります。これは、GridLayout が均一な分布を持たないことを意味します。このため、spanを使用してレイアウトを伸縮させることはできません。アイテムやレイアウトの伸縮を操作するには、代わりにstretchFactorやサイズヒントを使用してください。