2D UIの設計

2D ビューでアプリケーションを設計するには、コンポーネントファイルを開き、2Dコンポーネントやアセットのインスタンスをその中に配置します。

2D ビューでコンポーネントインスタンスを選択すると、その周囲や角にマーカーが表示されます。カーソルの形状に応じて、コンポーネントインスタンスをドラッグすることで、以下の操作を適用できます：

• 移動
• サイズ変更
• 回転

コンポーネントの移動

移動カーソルが表示されているときは、選択したコンポーネントインスタンスを「2D 」ビュー内の任意の位置に移動できます。

UI 内でコンポーネントインスタンスを配置するその他の方法の詳細については、「レイアウトのスケーラビリティの設定」を参照してください。

コンポーネントのサイズ変更

サイズ変更カーソルが表示されているときは、マーカーをドラッグしてコンポーネントインスタンスのサイズを変更できます。

選択したコンポーネントインスタンスの端ではなく、中心からサイズ変更を行うには、Alt キー（macOS ではOpt キー）を押しながら操作します。

コーナーマーカーを使用してサイズ変更を行う際に、画像のアスペクト比を維持するには、Shift キーを押します。これは、left、right、top、または bottom アンカーを使用して固定されているコンポーネントインスタンスでも機能します。

コンポーネントインスタンスの中心からサイズ変更を行い、かつアスペクト比を維持するには、Alt+Shift キー（macOS ではOpt+Shift キー）を押します。

UI 内のコンポーネントまたはコンポーネントインスタンスのサイズを指定するその他の方法の詳細については、「2D ジオメトリの設定」を参照してください。

コンポーネントの回転

コンポーネントインスタンスの角のいずれかに回転カーソル が表示されている場合、時計回りまたは反時計回りにドラッグして、コンポーネントインスタンスをその原点を中心に自由に回転させることができます。

さらに、Shift キーまたはAlt キー（macOS ではOpt キー）を押しながらドラッグすると、コンポーネントインスタンスをそれぞれ 5 度または 45 度の刻みで回転させることができます。

原点は、Properties > [Geometry - 2D ] > [Origin] で設定できます。ここでは、Rotation プロパティの値を度単位で入力することもできます。

拡大・縮小

ツールバーのズームボタンを使用して、2D ビューを拡大・縮小したり、リストからパーセンテージ単位でズームレベルを選択したりできます。さらに、ビュー内のすべてのコンテンツに合わせるズームや、現在選択されているコンポーネントインスタンスに合わせるズームを行うためのボタンも利用可能です。

親および兄弟コンポーネントへのスナップ

スナップ機能を使用すると、2D ビュー内のコンポーネントインスタンスを揃えることができます。スナップを有効にすると、すべてのコンポーネントインスタンスが親および兄弟コンポーネントにスナップされます。アンカーと組み合わせてスナップ機能を使用する場合、コンポーネントを別のコンポーネントにスナップすると、アンカーが作成されます。

スナップ機能を有効にするには、2D ビュー内で右クリックし、[Snapping ] > [Snap with Anchors ] または [Snap without Anchors] を選択します。

コンポーネントインスタンスの位置決めを支援するために、スナップラインが自動的に表示されます。

「Edit 」＞「Preferences 」＞ Qt Quick > Qt Quick Designer を選択して、スナップの設定を指定します。「Parent component padding 」フィールドで、親とスナップライン間の距離をピクセル単位で指定します。「Sibling component spacing 」フィールドで、兄弟コンポーネントとスナップライン間の距離をピクセル単位で指定します。

次の図は、「Parent component padding 」が 8 ピクセルに設定されている場合のスナップ線 (1) を示しています。

「Properties 」ビューを使用してコンポーネントインスタンスを配置・分散させるその他の方法については、「コンポーネントの配置と分散」を参照してください。

コンポーネントの境界線を非表示にする

2D ビューには、コンポーネントインスタンスの境界が表示されます。これらを非表示にするには、2D ビューを右クリックし、コンテキストメニューから [Show Bounds ] を選択します。

コンポーネントのサイズをプレビューする

UI ファイル内のルートコンポーネントの幅と高さが、コンポーネントのサイズを決定します。 ボタンなどのコンポーネントを、他のUIファイルで異なるサイズとして再利用したり、異なるデバイスプロファイル、画面解像度、または画面向きに対応したUIを設計したりできます。また、コンポーネントの最終的なサイズがプロパティのバインディングによって決定される場合、コンポーネントのサイズはゼロ (0,0) になることもあります。

さまざまなコンポーネントサイズを試すには、ツールバーの「Override Width 」および「Override Height 」フィールド (1) に値を入力します。変更内容は「2D 」ビュー (2) および「States 」ビュー (3) に反映されますが、UI ファイル内のプロパティ値は永続的に変更されることはありません。プロパティ値を永続的に変更するには、「Properties 」ビュー (4) を使用します。

ルートコンポーネントの初期サイズを設定するには、[Edit ] > [Preferences ] > Qt Quick > Qt Quick Designer を選択し、「Root Component Init Size 」グループでコンポーネントの幅と高さを指定します。

キャンバスのサイズを指定する

キャンバスのサイズを変更するには、[Edit ] > [Preferences ] > Qt Quick > Qt Quick Designer 「Canvas 」グループでキャンバスの幅と高さを指定します。

キャンバスの色を設定する

ルートコンポーネントの背景を透明に設定している場合、作業領域の色によっては、現在作業中のコンポーネントインスタンスが見えにくくなることがあります。 コンポーネントインスタンスをより見やすくするには、「 」リストからキャンバス色を選択します。デフォルトでは、色は透明です。キャンバス色を設定しても、ルートコンポーネントやコンポーネントインスタンスの背景色には一切影響しません。

2D ビューの内容を更新する

UI ファイルを開くと、そのファイルで定義されたコンポーネントと、そこに含まれるコンポーネントインスタンスが「2D 」ビューに描画されます。Properties でコンポーネントインスタンスのプロパティを編集すると、コードと2D ビューでの表示が同期しなくなる場合があります。たとえば、列や行内でのコンポーネントインスタンスの位置を変更した場合、新しい位置が2D ビューに正しく表示されないことがあります。

2D ビューの内容を更新するには、Rキーまたは「 」（Reset View ）ボタンを選択します。