2D UIのデザイン

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

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

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

コンポーネントの移動

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

UIでコンポーネントインスタンスを配置する別の方法については、レイアウトをスケーラブルにするを参照してください。

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

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

選択したコンポーネントインスタンスの端からではなく中央からリサイズするには、Alt（macOSではOpt）を選択します。

コーナーマーカーを使用してリサイズする際に画像の縦横比を保持するには、Shift を選択します。これは、左、右、上、または下のアンカーを使用して固定されているコンポーネントインスタンスでも機能します。

コンポーネントインスタンスの中心からのリサイズと縦横比の保持の両方を行うには、Alt+Shift（macOSではOpt+Shift）を選択します。

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

コンポーネントの回転

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

さらに、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) ボタンを選択します。