コンポーネントファイルの移動

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

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

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

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

コンテキストメニューのコマンドを選択すると、コンポーネントにコマンドが適用されます。コマンドを使用できるかどうかは、コンポーネントのタイプによって異なります。たとえば、コンテキストメニューのChange Source URL を選択すると、Image コンポーネントのソースを変更できます。

コンポーネントアイコンのカラー化

Navigator の異なるタイプのコンポーネントを視覚的に区別するために、コンポーネントアイコンをカラー化します。

Navigator にリストされているコンポーネントアイコンのカラー化を切り替えるには、 （Colorize Component Icons）を選択します。カラー化機能は、以下の色を使用します：

• 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 ビューの1つでコンポーネントのプロパティを誤って変更すると、驚くような結果になりがちです。例えば、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 モードでコードを表示すると、プロパティ・エイリアス宣言は通常のプロパティ定義と同じように見えますが、プロパティ型の代わりにエイリアスキーワードが必要であることと、プロパティ宣言の右辺が有効なエイリアス参照でなければならないことが異なります：

property alias <name>: <alias reference>

例えば、次のエイリアスは、アイテムコンポーネントインスタンス内のボタンコンポーネントインスタンスを参照しています：

property alias button: item.button

有効なエイリアス参照：

• 有効なエイリアス参照：プロパティエイリアスが宣言されたコンポーネント内のコンポーネントインスタンスまたはプロパティのみを指すことができます。
• 任意の JavaScript 式を含むことはできません。
• プロパティのエイリアスが宣言されたコンポーネントとは別のタイプのコンポーネントを指すことはできません。
• エイリアスが最初に宣言されたときに定義されている必要があります。
• アタッチされたプロパティを指すことはできません。
• 第3レベル以下の入れ子になったコンポーネント・インスタンスのプロパティを指すことはできません。

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

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

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

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

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

コンポーネントの階層がパンくずパスとして表示され、コンポーネント名を選択してそれぞれのファイルを開くことができます。これにより、コンポーネントの編集が終わったときに、簡単に最上位レベルに戻ることができます。