Version: 2019.3
言語: 日本語
ビジュアルツリー
UXML 形式

レイアウトエンジン

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

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

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

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

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

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

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

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

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

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

  • 要素を親位置の矩形に対して相対的に配置するには、position プロパティを absolute (絶対位置) に設定します。この場合、兄弟や親のレイアウトには影響しません。


  • 2018–11–02 修正されたページ
ビジュアルツリー
UXML 形式