コンポーネントファイルの閲覧

「Navigator 」ビューには、現在のコンポーネントファイル内のコンポーネントとその関係が表示されます。コンポーネント (1) は、親 (2) の下にツリー構造で一覧表示されます。コンポーネントをプレビューするには、その上にマウスを合わせます (3)。

「Navigator 」ビューでコンポーネントを選択すると、「Properties 」ビューでそのプロパティを編集できます。コンポーネントは、親コンポーネントのプロパティにアクセスできます。「2D 」ビューでコンポーネントを選択するには、コンポーネントを右クリックし、「Selection 」サブメニューから別のコンポーネントを選択します。

通常、「2D 」ビューでは、子コンポーネントは親コンポーネント内に配置されます。ただし、必ずしも親コンポーネント内に収まる必要はありません。たとえば、その下にある矩形や画像よりも大きなマウス領域を作成したい場合などがあります。

コンポーネントをコピーすると、そのすべての子コンポーネントもコピーされます。コンポーネントを削除すると、子コンポーネントも削除されます。

コンテキストメニューのコマンドを選択して、コンポーネントにコマンドを適用します。利用可能なコマンドはコンポーネントの種類によって異なります。たとえば、コンテキストメニューから「Change Source URL 」を選択することで、Imageコンポーネントのソースを変更できます。

コンポーネントアイコンの色付け

「Navigator 」で、コンポーネントのアイコンに色を付けて、異なる種類のコンポーネントを視覚的に区別します。

「Navigator 」に一覧表示されているコンポーネントアイコンの色付けを切り替えるには、「 」（コンポーネントアイコンに色を付ける）を選択します。色付け機能では、以下の色が使用されます。

• 2Dコンポーネントには緑色。
• 3Dコンポーネント：黄色。
• マテリアルおよびテクスチャ：青。
• その他の種類のコンポーネント：灰色。

ナビゲータでのコンポーネントの表示・非表示

Navigator でコンポーネントを表示または非表示にするには、以下の方法を使用します。

参照ノードの表示と非表示

Navigator で参照ノードを表示または非表示にすることができます。参照ノードをクリックして、参照先のノードを選択します。

Navigator 内のコンポーネントには、その1つ以上のプロパティにバインドされたノード（参照ノードと呼ばれる）が含まれている場合があります。参照ノードの表示/非表示を切り替えることで、各コンポーネントの子ノードとして参照ノードを表示できます。参照ノードは現在のノードの下にネストされて表示されるため、バインディングやノード間の依存関係を追跡しやすくなります。

参照ノードの表示/非表示を切り替えるには、[ ]（参照ノードを表示）を選択します。

その他のコンポーネントの表示・非表示

アプリケーションの特定の部分に焦点を当てて「2D 」ビュー内のコンポーネントを表示または非表示にするには、「Navigator 」で「 」および「 」を選択します。

アプリケーションコード内のコンポーネントの表示/非表示を変更するには、Properties ビューでそのコンポーネントのVisibility を設定するか、コンテキストメニューからVisibility を選択します。

また、Properties で「Opacity 」フィールドを 0 に設定することで、アニメーションを適用したいコンポーネントを UI 上で非表示にすることもできます。

他のすべてのプロパティと同様に、可視性と不透明度は親コンポーネントから継承されます。子コンポーネントを非表示または表示するには、親コンポーネントのプロパティを編集してください。

Navigator で非表示のコンポーネントを表示または非表示にするには、 を選択します。

ノードの分離

Navigator で選択した2Dノードを隔離し、必要なノードのみを表示させることができます。Navigator に非表示にしたいノードが多数あり、それらを1つずつ選択して非表示にするのが面倒な場合に、ノードの隔離が役立ちます。

ノードを隔離するには：

1. Navigator で非表示にしたいノードを選択します。
2. 選択したノードを右クリックしてコンテキストメニューを開き、「Isolate Selection 」を選択するか、Shift+B キーを押します。

Navigator ですべてのノードを表示するには、選択したノードを右クリックして「Show All Nodes 」を選択するか、Alt/Option+B キーを押します。

コンポーネントのロック

複雑なアプリケーションを設計する際、Qt Quick Designerのビューのいずれかで、意図せずコンポーネントのプロパティを変更してしまい、予期せぬ結果を招くことがよくあります。たとえば、「2D 」ビューが混雑していると、特定のコンポーネントを選択または変形しようとした際に他のコンポーネントが邪魔になり、結果として意図した以上に多くのコンポーネントを変形させてしまうことがあります。

現在編集中ではないコンポーネントとその子コンポーネントをロックするには、Navigator で「 」を選択します。ロックされたコンポーネントは、Qt Quick Designerのどのビューでも操作できません。再度編集したい場合は、コンポーネントのロックを解除してください。

2D ではロックされたコンポーネントを選択できず、Properties ではそのプロパティにアクセスできません。

ロックされたコンポーネントのプロパティを変更する状態を削除しようとすると、削除の確認を求められるメッセージが表示されます。

キーフレームアニメーションにイージングカーブを追加している場合、Curves ビューでそれらをロックおよびロック解除できます。イージングカーブを含むコンポーネントをロックすると、ロック状態はNavigator とCurves 間で同期されます。

コンポーネントの配置

コンポーネントファイル内のコンポーネントの順序は、「Navigator 」ビュー、「Code 」ビュー、または「Edit 」モードで確認できます。ファイル内のコンポーネントの順序は、「2D 」ビューでの描画順序も決定します。 デフォルトでは、ファイルの先頭に配置されたコンポーネントは、Navigator ツリーの最下部に表示され、2D ビューでは、重なり合うコンポーネントの後ろに配置されます。他のツールと同様に、ファイル内の出現順にコンポーネントを表示するには、[] を選択します。

コンポーネントをその親要素内のツリーの先頭または末尾に移動するには、Navigator でそのコンポーネントを右クリックし、[Arrange ] > [Bring to Front ] または [Send to Back] を選択します。コンポーネントを上下に移動するには、[Bring Forward ] または [Send Backward] を選択します。

選択したコンポーネントの順序を逆にするには、Arrange >Reverse を選択します。

また、コンポーネントをツリー内の別の位置にドラッグしたり、「 」および「 」ボタンを使用して、ツリー内でコンポーネントを移動することもできます。「 」および「 」ボタンを使用して、コンポーネントの親を変更できます。

コンポーネントのインスタンスを「2D 」ビューにドラッグすると、新しいコンポーネントはその直下のコンポーネントの子として追加されます。コンポーネントを移動する際、単に位置を調整するのか、新しい親コンポーネントに紐付けるのかを判別することはできません。そのため、親コンポーネントは自動的に変更されません。

プロパティエイリアスの追加

プロパティエイリアスとは、コンポーネントの外部から使用できるプロパティのことです。「Code 」ビューまたは「Edit 」モードでコードを表示すると、プロパティエイリアスの宣言は通常のプロパティ定義と似ていますが、プロパティ型の代わりに`alias`キーワードが必要であり、プロパティ宣言の右辺は有効なエイリアス参照でなければならない点が異なります。

property alias <name>: <alias reference>

たとえば、次のエイリアスは、itemコンポーネントのインスタンス内にあるbuttonコンポーネントのインスタンスを参照しています：

property alias button: item.button

有効なエイリアス参照：

• プロパティエイリアスが宣言されているコンポーネント内のコンポーネントインスタンスまたはプロパティのみを指すことができます。
• 任意の JavaScript 式を含めることはできません。
• プロパティエイリアスが宣言されているコンポーネントとは異なる型のコンポーネントを指すことはできません。
• エイリアスを最初に宣言する際に定義する必要があります。
• アタッチされたプロパティを指すことはできません。
• 3 階層より深いネストされたコンポーネントインスタンスのプロパティを指すことはできません。

Navigator の [ ] (Export) ボタンを使用して、コンポーネントを有効なエイリアス参照を持つプロパティエイリアスとしてエクスポートできます。

その後、他のコンポーネントでこのプロパティエイリアスを使用して、このコンポーネントへの接続を作成できます。

コンポーネント内での移動

コンポーネントを定義するファイル（ui.qml 、.qml ）には、別のファイルで定義された他のコンポーネントのインスタンスを含めることができます。コンポーネントを定義するファイルは、さまざまなビューからさまざまな方法で開くことができます。

• 「2D 」または「Navigator 」ビューで、コンポーネントのインスタンスを右クリックし、コンテキストメニューから「Edit Component 」を選択するか、F2キーを押します。
• 「Properties 」で、「Edit Base Component 」を選択します。

コンポーネントの階層構造がブレッドクラムパスとして表示され、コンポーネント名を選択することでそれぞれのファイルを開くことができます。これにより、コンポーネントの編集が完了した際に、トップレベルへ簡単に戻ることができます。