レイアウトのスケーラビリティを設定する

UI 内のコンポーネントの位置は、絶対位置か、他のコンポーネントに対する相対位置のいずれかです。ビジュアルコンポーネントは、どの時点においても画面座標系上の特定の位置に存在します。ビジュアルコンポーネントの x 座標と y 座標は、その親コンポーネントの座標を基準としており、左上隅の座標は (0, 0) となります。

静的なUIを設計する場合は、手動での配置がコンポーネントを配置する最も効率的な方法です。動的なUIの場合は、以下の配置方法を使用してください。

バインディングの設定

プロパティバインディングを使用すると、コンポーネントのプロパティを関連付けることができます。これにより、一方の変更が他方に影響を与えるようになります。バインディングが設定されると、他のプロパティやデータ値が変更された場合、そのプロパティ値は自動的に最新の状態に保たれます。

コンポーネントのプロパティにプロパティバインディングを設定するには：

1. 「Properties 」ビューに移動し、プロパティの横にある「 」（Actions ）メニューを選択してから、「Set Binding 」を選択します。

   

2. 「Binding Editor 」で、利用可能なコンポーネントとそのプロパティのリストから、コンポーネントとプロパティを選択します。

   

バインディングが設定されると、「Actions 」メニューのアイコンが「 」に変わります。バインディングを削除するには、「Actions 」>「Reset 」を選択します。

「Connections 」ビューの「Bindings 」タブを使用してバインディングを設定する方法については、「プロパティ間のバインディングの追加」を参照してください。

アンカーとマージンの設定

アンカーベースのレイアウトでは、各コンポーネントには、上、下、左、右、塗りつぶし、水平中央、垂直中央、ベースラインという一連の非表示のアンカーラインがあります。 アンカーを使用して、コンポーネントの1つ以上のアンカー線を別のコンポーネントのアンカー線に接続することで、コンポーネントを別のコンポーネントの隣または内部に配置できます。コンポーネントが変更された場合、そのコンポーネントにアンカーされているコンポーネントは、アンカー関係を維持するために自動的に調整されます。

コンポーネントのアンカーとマージンを設定するには：

1. 「Properties 」 > 「Layout 」 > 「Anchors 」の順に移動します。
2. コンポーネントに設定したいアンカーに対応するボタンを選択します。複数のアンカーを組み合わせることもできます。選択した各ボタンについて、対応するドロップダウンからそのアンカーのターゲットコンポーネントを選択できます。
3. コンポーネントにフィルアンカーを適用するには、「 」（Fill to Parent ）を選択します。
4. アンカーを保存済みの状態にリセットするには、「 」（Reset Anchors ）を選択します。

パフォーマンス上の理由により、コンポーネントをアンカーできるのは、その兄弟コンポーネントまたは直接の親コンポーネントのみです。デフォルトでは、アンカーボタンを使用すると、コンポーネントは親コンポーネントにアンカーされます。コンポーネントの兄弟コンポーネントにアンカーするには、その兄弟コンポーネントを「Target 」として選択してください。

任意のアンカー設定はサポートされていません。たとえば、anchor.left: parent.right を選択しないでください。代わりに、anchor.left: parent.left を選択してください。アンカーボタンを使用する場合、親コンポーネントへのアンカーは常に同じ側に設定されます。一方、兄弟コンポーネントへのアンカーは反対側に設定されます：anchor.left: sibling.right 。これにより、兄弟コンポーネントをまとめて配置することができます。

次の画像では、rectangle2の左端は左側の兄弟コンポーネントであるrectangle1の右端にアンカーされ、上端は親コンポーネントの上端にアンカーされています。

コードでは、アンカーは次のように設定されています：

Rectangle {
    id: rectangle2
    width: 84
    height: 84
    color: "#967de7"
    anchors.left: rectangle1.right
    anchors.top: parent.top
    anchors.leftMargin: 51
    anchors.topMargin: 56
}

コンポーネントの外側の余白を定義するには、Margin を設定します。マージンはアンカーに対して有効です。レイアウトや絶対位置指定を使用している場合は、マージンは効果を発揮しません。

コンポーネントの整列と均等配置

コンポーネントのグループについては、それらを選択して均等に配置および分散させます。コンポーネントの位置は固定されているため、アンカー設定されたコンポーネントにはこれらの機能を適用できません。スケーラビリティを確保するため、デザインが完成したら、配置および分散させたコンポーネントをアンカー設定してください。

「Alignment 」フィールドのボタンを選択して、コンポーネントグループの上下または左右の端を、グループの中心から最も遠いコンポーネントに合わせて整列・配置します。たとえば、左揃えの場合、コンポーネントは最も左にあるコンポーネントに合わせて整列されます。コンポーネントの水平方向または垂直方向の中心、あるいはその両方を揃えることもできます。

「Align to 」フィールドで、コンポーネントを「選択範囲」、「ルートコンポーネント」、または「Key object 」フィールドで選択した「キーコンポーネント」のいずれを基準に整列させるかを選択します。キーコンポーネントは、選択範囲に含まれている必要があります。

コンポーネント自体、またはコンポーネント間の間隔を均等に配置します。コンポーネントや間隔を、半ピクセルが生じることなく等ピクセル値で均等に配置できない場合、通知が表示されます。「Qt Quick Designer」に、可能な限り近い値を使用してコンポーネントや間隔を配置させるか、またはコンポーネントと間隔が完全に均等に配置されるようデザインを調整してください。

コンポーネントを配置する際は、「Distribute objects 」フィールドのボタンを選択し、コンポーネント間の距離を、上下または左右の端から計算するか、水平／垂直の中心から計算するかを指定します。

余白を配置する際は、「Distribute spacing 」フィールドのボタンを選択して、対象領域内で均等に配置するか、起点から計算された指定された間隔で配置するかを決定します。対象領域内でコンポーネントを均等に配置する方向（x 軸に沿った水平方向、または y 軸に沿った垂直方向）を選択します。

あるいは、開始点ボタン（対象領域または項目の上端／左端、下端／右端、または中心）のいずれかを選択して、ピクセル単位で間隔を配置することもできます。使用する端は、項目が水平方向または垂直方向に配置されるかによって異なります：

• 「 」および「 」を選択すると、ターゲット領域またはアイテムの左端が起点として使用されます。
• および を選択すると、上端が起点として使用されます。
• 「 」および「 」を選択すると、右端が起点として使用されます。
• 下端を使用するには、「 」と「 」を選択します。

[Pixel spacing ] フィールドで、コンポーネント間の間隔をピクセル単位で設定します。ピクセル単位での間隔の配分を無効にするには、[ ] ボタンを選択します。

ポジショナーの使用

ポジショナーコンポーネントは、子コンポーネントの位置を管理するコンテナです。多くのユースケースにおいて、最適なポジショナーは単純な列、行、フロー、またはグリッドです。「Components 」>「Default Components 」>「Positioner 」で利用可能なコンポーネントを使用して、コンポーネントの子要素をこれらの配置形式で可能な限り効率的に配置してください。

Column 、Row 、Grid 、またはFlow 内で複数のコンポーネントを配置するには：

1. 「2D 」ビューでコンポーネントを選択します。
2. 「2D 」ビュー内の任意の場所を右クリックし、「Positioner 」>「Row 」、「Column 」、「Grid 」、または「Flow Positioner 」を選択します。

カラムポジショナー

「Column 」は、子コンポーネントを単一の列に沿って配置します。これは、アンカーを使用せずに一連のコンポーネントを垂直方向に配置するための便利な方法として使用されます。

すべてのポジショナーについて、「Spacing 」フィールドで子コンポーネント間の間隔を設定します。

さらに、「Padding」セクションで、コンテンツとコンポーネントの左、右、上、下のエッジとの間の垂直および水平のパディングを設定します。

「Row」および「Flow」ポジショナー

「Row 」は、子コンポーネントを 1 行に沿って配置します。これは、アンカーを使用せずに一連のコンポーネントを水平方向に配置するための便利な方法として使用されます。

Flow コンポーネントは、ページ上の単語のように子コンポーネントを配置し、それらを折り返してコンポーネントの行や列を作成します。

フローおよび行配置ツールを使用する場合は、「Flow 」フィールドでフローの方向を「左から右」または「上から下」のいずれかに設定してください。コンポーネントは、「Layout direction 」フィールドで設定した値に従って互いに隣接して配置され、Flow コンポーネントの幅または高さを超えると、次の行または列に折り返されます。

「Layout direction 」フィールドで、レイアウトの方向を「LeftToRight 」または「RightToLeft 」のいずれかに設定します。行の幅が明示的に設定されている場合、左アンカーは行の左側に、右アンカーは行の右側に配置されます。

グリッドポジショナー

Grid は、すべての子コンポーネントを収容できる十分な大きさのセルグリッドを作成し、これらのコンポーネントを左から右、上から下の順にセルに配置します。各コンポーネントは、位置 (0, 0) でそのセルの左上隅に配置されます。

Qt Quick Designerは、2D ビュー内の子コンポーネントの位置に基づいてグリッドを生成します。「Rows 」および「Columns 」フィールドで、行数と列数を変更できます。

フローやレイアウトの方向に加え、グリッドコンポーネントの水平および垂直方向の配置を設定できます。デフォルトでは、グリッドコンポーネントは垂直方向に上端に揃えられます。水平方向の配置は、Layout direction フィールドの値に従います。たとえば、レイアウトの方向がLeftToRight に設定されている場合、コンポーネントは左揃えになります。

レイアウトを反転させるには、レイアウト方向を「RightToLeft 」に設定します。コンポーネントの水平方向の配置も反転させるには、「Alignment H 」フィールドで「AlignRight 」を選択します。

レイアウトの使用

「Components 」で利用可能なコンポーネントを使用して、 Qt Quick Layouts にあるコンポーネントを使用して、UI内のコンポーネントを配置します。

ポジショナーとは異なり、レイアウトは子コンポーネントの位置とサイズの両方を管理するため、動的でサイズ変更可能なUIに最適です。ただし、Properties の「Geometry - 2D」セクションで、子コンポーネントの暗黙的なサイズが不適切な場合を除き、固定の位置やサイズを選択しないでください。

レイアウト自体のアンカー、または width および height プロパティを使用して、レイアウトではない親コンポーネントに対する相対的なサイズを指定してください。ただし、レイアウト内の子コンポーネントをアンカーで固定しないでください。

Grid Layout にコンポーネントを配置するには：

1. すべてのコンポーネントを選択し、そのうちの1つを右クリックします。
2. コンテキストメニューから、[Layout ] > [Grid Layout] を選択します。

   

3. Grid Layout に配置すると、コンポーネントは行と列に整列されます。

   

コンポーネントをグリッド内の幅と高さに合わせて配置するには、次の手順に従ってください：

1. 「2D 」ビューで「Rectangle 」コンポーネントを選択し、「Properties 」ビューの「Layout 」に移動します。
2. 「Fill layout 」で、「Width 」と「Height 」の両方のチェックボックスを選択します。

   

   注： 「Row span 」と「Column span 」を調整し 、「Grid Layout 」内で各コンポーネントがより多くの行と列のスペースを確保できるようにします。

3. すべての「Rectangle 」コンポーネントについて、上記の手順を繰り返します。
4. Navigator ビューでGrid Layout を選択します。
5. 「Properties 」ビューで「Geometry-2D 」に移動します。「Size 」で、「Width 」と「Height 」を増やします。
6. すべてのRectangle コンポーネントが、それに応じて変更を反映します。

   

スタックレイアウト

コンポーネントを積み重ねるには、Stack Layout を使用します。

Stack Layout を使用するには：

1. 「Stack Layout 」コンポーネントを、「2D 」ビューまたは「Navigator 」ビューにドラッグします。
2. 積み重ねたいコンポーネントを「Components 」ビューから「2D 」ビューまたは「Navigator 」ビューにドラッグし、「Stack Layout 」コンポーネントの上に配置します。

   注： 「Stack Layout 」にコンポーネントを追加するには、「2D 」ビュー内の「Stack Layout 」コンポーネント名の横にある「 」ボタンを選択することもできます 。

3. Stack Layout のコンポーネント間を移動するには、2D ビューでStack Layout コンポーネントを選択します。次に、 （Previous ）および （Next ）ボタンを選択します。これにより、Stack Layout のCurrent index が更新され、Current index コンポーネントがスタックの最上層に移動します。

   注：あるいは 、Stack Layout コンポーネントを選択し、Properties ビュー >Stack Layout に移動して、Current index を更新することもできます。インデックスは「0」（ゼロ）から始まります。

Stack Layout の動作を理解するには、以下の例を参照してください：

1. 「Component 」ビューから「Stack Layout 」を「Navigator 」または「2D 」ビューにドラッグします。
2. 「Navigator 」ビュー内の「Stack Layout 」コンポーネントに、「Rectangle 」コンポーネントを3つドラッグします。

   

3. 矩形コンポーネントを選択し、「Properties 」ビュー > 「Rectangle」 > 「Fill color 」の順に移動して、「#ff0000」に変更します。
4. 2つ目の矩形については、前述の手順に従い、Fill color を「0000ff」に変更します。
5. 3つ目の長方形についても、前述の手順に従い、Fill color を「00ff00」に変更します。
6. 「Components 」ビューから「Slider 」コンポーネントを「2D 」ビューにドラッグします。
7. Slider コンポーネントを選択し、Properties ビュー >Slider に移動します。Value を「0」、From を「0」、To を「2」、Step size を「1」に設定します。

   

8. 「Navigator 」ビューに移動し、「Stack Layout 」コンポーネントを選択します。
9. 「Properties 」ビュー > 「Stack Layout 」に移動します。「 」を選択してコンテキストメニューを表示し、「Set Binding 」を選択します。

   

10. 「Binding Editor 」で、左側のドロップダウンから「Slider 」を選択し、右側のドロップダウンから「Value 」を選択します。「OK 」を選択してバインディングを確定します。

    

11. Live Preview またはRun Project を選択して、アプリケーションを実行します。
12. スライダーをドラッグして、長方内の色を変更します。

    

コンポーネントの配置

「Frame 」および「Group Box 」コントロールを使用すると、コントロールのグループの周囲に枠線を引くことができます。

次の表に、UI 内のコンポーネントを整理するために使用できる UI コントロールを示します。これらのコントロールにアクセスするには、[Components ] > Qt Quick Controlsを選択します。

アイコン	名前	目的
	Frame	一連のコントロールを囲む視覚的な枠。
	Group Box	コントロールのグループを囲む、タイトル付きの視覚的な枠。
	Page	ヘッダーとフッターをサポートする、スタイルが適用されたページコントロール。
	Pane	アプリケーションのスタイルおよびテーマに合わせた背景。