リストとフレックスレイアウト

*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

親コンテナ内の横向き行または縦向きの列に、UIListLayout 位置の兄弟 GuiObjects を横向きに配置する。兄弟オブジェクトを追加または削除するたびに、レイアウトはそれに応じて調整されます。

方向を満たす

FillDirection プロパティは、リストレイアウトの兄弟がレンダリングされる方向を決定します。

UIListLayouts illustrating FillDirection of either horizontal or vertical.

注文は、各アイテムの 整数値に基づいて上昇順になるか、アイテムの アルファ数字値に基づいてアルファ順になるレイアウトの プロパティによって決定されます。

List layout examples illustrating numerical LayoutOrder sorting or alphanumerical Name sorting.

アライメント

HorizontalAlignment および VerticalAlignment プロパティは、リストの兄弟のそれぞれの X および Y 配置を、お互いとリストのコンテナ内の全体の境界に関連して決定します。たとえば、横向きで満たされたリスト の で中央にリストの兄弟を一致させ、リストを容器内で縦向きに中央に配置します。

List layout illustrating VerticalAlignment of Center.

包装

親コンテナの中の兄弟がデフォルトサイズを超えて他の行に包まれるかどうかを決定する Wraps ブールン控制は、親コンテナの幅/高さの境界を超えると、デフォルトサイズが他の行に包まれるかどうかを決定します。

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.

パッド

プロパティは、各リストアイテムの間の空白量を決定し、スケール(現在の方向のコンテナのサイズのパーセンテージ)またはオフセット(ピクセルサイズに似た静的スペース値)のいずれかに設定します。

フレックスレイアウト

flex を に統合することは、ライン全体または変数スペース全体でリストアイテムを均等に満たしたり、配置したり、またはストレッチしたりする強力な方法です。または、変数スペースでフレックス特定のアイテムを配置したり、ストレッチしたりする方法です。

均等に満たすか分配する

リストレイアウトの 満たす方向Horizontal に設定されると、HorizontalFlex プロパティは親コンテナに余分な横スペースを配布する方法を指定します。同様に、満たす方向が Vertical に設定されると、VerticalFlex プロパティは、追加の縦方向のスペースをどのように分配するかを指定します。

UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.

1つの実用的な使用法は、HorizontalFlex タブバーにフレックスが同数のタブを均等に満たす タブ付きウィンドウ インターフェイスで、タブの数に関係なくです。この場合、開発者が定義した幅設定なしで各タブの幅を自動的に計算し、タブ数が変更された場合に自動的に調整することで、フレックスよりも簡単なアプローチはありません。

アイテムラインの配置

ItemLineAlignment プロパティは、ライン内の兄弟の 交差方向の 配置を定義し、異なる幅/高さのオブジェクトを整列させたり、小幅/高さのオブジェクトを全線に埋めることができます。

Examples of options for ItemLineAlignment in a horizontal fill direction.

ItemLineAlignment の 1つの実用的な使用ケースは、連続してサイズが異なるタイルのシリーズを伸ばして、全行を埋めることです(Stretch)、レイアウトをよりコーヒーにします。

異なるコンテンツの高さを持つタイルは、不均一でバラバラのレイアウトになります

フレックス個々のアイテム

全体のレイアウトをフレックスすることは強力なユーティリティですが、特定のレイアウトは 個々のアイテムのフレックス により適しています。このレイアウトでは、リストの一部の要素がコアサイズを維持し、他のアイテムは変数スペースを埋めるためにフレキシブルになります。1つの実用的な使用法は、両端に均一の ラベル があり、中央の全幅を埋める柔軟なスライダーバーです。

Example of UIFlexItem applied to a specific GuiObject under control of a UIListLayout.

特定のリストアイテムを柔軟に設定するには、柔軟なアイテムの子として UIFlexItem を挿入し、その FlexMode プロパティを FillGrowShrink 、または Custom に設定します。

Example hierarchy of a UIFlexItem parented to a GuiObject under control of a UIListLayout.