レイアウトをスケーラブルにする

UIにおけるコンポーネントの位置は、他のコンポーネントに対して絶対的または相対的です。ビジュアルコンポーネントは、どの瞬間においてもスクリーン座標系の特定の位置に存在します。ビジュアルコンポーネントの x 座標と y 座標は、そのビジュアルコンポーネントの親からの相対座標で、左上隅の座標は (0, 0) です。

静的なUIをデザインする場合は、手動でコンポーネントを配置するのが最も効率的です。動的 UI の場合は、次の位置決め方法を使用します。

バインディングの設定

プロパティ・バインディングを使用すると、コンポーネントのプロパティを結びつけることができます。そのため、あるコンポーネントの変更が別のコンポーネントに影響することがあります。バインディングが設定されると、他のプロパティやデータ値が変更されても、プロパティの値は自動的に最新の状態に保たれます。

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

1. Properties ビューに移動し、プロパティの横にある (Actions) メニューを選択し、Set Binding を選択します。

   

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

   

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

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

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

アンカーベースのレイアウトでは、各コンポーネントには、top、bottom、left、right、fill、horizontal center、vertical center、baselineの不可視のアンカーラインがあります。アンカーを使用して、コンポーネントのアンカーラインを他のコンポーネントのアンカーラインにアタッチすることで、コンポーネントを他のコンポーネントに隣接または内部に配置します。コンポーネントが変更されると、そのコンポーネントにアンカーされているコンポーネントは、アンカーを維持するために自動的に調整されます。

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

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 orFlow Positioner を選択する。

列ポジショナー

Column は、子コンポーネントを1つの列に沿って配置します。これは、アンカーを使わずに一連のコンポーネントを垂直に配置する便利な方法として使われます。

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

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

行とフローのポジショナー

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

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

フローと行のポジショナーでは、Flow フィールドでフローの方向を左から右、または上から下に設定します。コンポーネントは、Flow コンポーネントの幅または高さを超えるまで、Layout direction フィールドで設定した値に従って隣同士に配置され、その後、次の行または列に折り返されます。

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

グリッド・ポジショナー

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

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

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

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

レイアウトの使用

Components で利用可能なコンポーネントを使用します。 Qt Quick Layoutsで利用可能なコンポーネントを使用します。

ポジショナーとは異なり、レイアウトは子コンポーネントの位置とサイズの両方を管理するため、動的でサイズ変更可能な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 コンポーネントの上に配置します。

   注： 2D ビューのStack Layout コンポーネント名の隣にある ボタンを選択することでも、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. Rectangle コンポーネントを3つ、Navigator ビューのStack Layout コンポーネントにドラッグする。

   

3. 矩形コンポーネントを選択し、Properties ビュー > 矩形 >Fill color に移動し、"#ff0000" に変更します。
4. 2つ目の長方形については、前のプロセスに従い、Fill color を「0000ff」に変更します。
5. 3つ目の長方形は、前述の手順に従い、Fill color を「00ff00」に変更します。
6. Components ビューから2D ビューにSlider コンポーネントをドラッグします。
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	アプリケーションのスタイルとテーマにマッチする背景。