Version: 2019.1
ビジュアルツリー
UXML 形式

レイアウトエンジン

UIElements にはレイアウトエンジンが含まれており、レイアウトとスタイリングのプロパティーに基づいてビジュアル要素を配置します。レイアウトエンジンは、Flexbox のサブセットの HTML/CSS レイアウトシステムを実装する Yoga オープンソースプロジェクト です。

Yoga と Flexbox の手引きとして、以下の外部リソースを参照してください。

デフォルトでは、すべてのビジュアル要素はレイアウトの一部です。レイアウトには以下のデフォルトの動作があります。

  • コンテナは子を垂直に配置します。
  • コンテナ矩形の位置に子の矩形が含まれます。この動作は他のレイアウトプロパティーによって制限される場合があります。
  • テキストを含むビジュアル要素は、サイズ計算でテキストサイズを使用します。この動作は他のレイアウトプロパティーによって制限される場合があります。

UIElements には、ボタン、トグル、テキストフィールド、ラベルなどの標準 UI コントロール用の ビルトインコントロール が含まれます。これらのビルトインコントロールにはスタイルがあり、レイアウトに影響します。

以下は、レイアウトエンジンの使い方のヒントです。

  • widthheight を設定して、要素のサイズを定義します。

  • flexGrow プロパティー (USS: flex-grow: <value>;) を使用して、要素に調整できるサイズを割り当てます。flexGrow プロパティーの値は、要素のサイズがその兄弟によって決定されるときに、ウェイトとして機能します。

  • flexDirection プロパティーを row (USS: flex-direction: row;) に設定すると、水平レイアウトに切り替えられます。

  • 元のレイアウト位置に基づいて要素をオフセットするには、相対位置を使用します。

  • Set the position property to absolute to place an element relative to its parent position rectangle. In this case, it does not affect the layout of its siblings or parent.


ビジュアルツリー
UXML 形式