Dock Layout ノードを使用する¶

Dock Layout ノードは、Dock Layout ノードの内枠に沿って互いに相対的な配置を行います。

Dock Layout ノードは、そのアイテムを減算的に配置します。最初のノードを配置した後、Dock Layout ノードは残りのスペースを使用して次のノードを配置します。このように続きます。子ノードを配置する際、Dock Layout ノードはその全体のサイズを使用します。

Dock Layout ノードで Side プロパティを使用して、ノードを配置したい側を設定します。

Dock Layout ノードは、その子ノードの位置を以下の方法で決定します。

ノードツリー内で子ノードが表示される順序。
Dock Layout ノードの各子ノードにおける Side プロパティの値。Dock Layout ノードは、各子ノードをその側面全体に占めるように設定します。
Dock Layout ノード内の子ノードの数。

../../_images/dock-layout-how-it-works.gif

Dock Layout ノードの作成¶

Dock Layout ノードを作成するには、

Node Tree で、Dock Layout ノードを作成したいノード Alt を押しながら右クリックを選択し、Dock Layout 3D または Dock Layout 2D のいずれかを選択します。

3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Node Tree で、前のステップで作成したレイアウトに子ノードを追加します。

例えば、Dock Layout 3D を作成した場合、いくつかの Plane ノードを追加し、Dock Layout 2D を作成した場合、いくつかの Image ノードを追加します。

子ノードを追加すると、Dock Layout ノードが自動的にそれらを配置します。
Node Tree で、Dock Layout ノードのすべての子ノードを選択します。Properties で、Dock Layout > Side プロパティを追加し、次のように設定します:
- Left を使用して、子ノードを Dock Layout ノードの左部分に配置します。
- Right を使用して、子ノードを Dock Layout ノードの右側に配置します。
- Top を使用して、子ノードを Dock Layout ノードの上部に配置します。
- Bottom を使用して、子ノードを Dock Layout ノードの下部に配置します。
例えば、Side プロパティを設定します。
- Image から Top へ
- Button から Bottom へ
- Temperature-F から Right へ
- Condition から Right へ
- Temperature-C から Left へ
（オプション） Dock Layout ノードの最後の子ノードに Dock Layout ノードの残りのスペースを占有させたい場合は、Dock Layout ノードに Last Item Fill プロパティを追加し、有効にしてください。
（オプション）レイアウト内のチャイルドノードの周囲をクリアするには、Node Tree でレイアウト内のチャイルドノードを選択し、Properties でをクリックし、マージンプロパティを追加して設定します。
- Depth Margin は、チャイルドノードの前後の領域をクリアします。
- Horizontal Margin は、チャイルドノードの左側と右側のエリアをクリアします。
- Vertical Margin は、チャイルドノードの上下の領域をクリアします。