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 ）ボタンを選択してください。