UIListLayout

非推奨を表示

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

A UIListLayout 親UIコンテナ内の行または列内の位置の兄弟UI要素を、FillDirection に基づいて配置します。各兄弟の および プロパティは、列配置に無視されたり、上書きされたりし、各兄弟は定義された を保持しない限り、レイアウトがフレックスレイアウトを使用するように構成されていない限り、列配置は無視されます。詳細については、リストとフレックスレイアウトを参照してください。

UIListLayouts illustrating FillDirection of either horizontal
or vertical.

兄弟のレイアウト順序を制御するには、SortOrderEnum.SortOrder.Name または Enum.SortOrder.LayoutOrder に設定し、アルファベット順に兄弟の名前を変更するか、それぞれLayoutOrder 値を設定します。UIListLayout は、要素が追加されたり削除されたり、または兄弟の Name または LayoutOrder が変更されたときに自動的に要素を再配置します。

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

兄弟の間のパッドは、Padding プロパティを介して制御され、親コンテナの境界内で包装は Wraps ブールンを介して制御されます。レイアウトがフレックスレイアウトを使用するように構成されていない限り、親コンテナ内の兄弟の配置は HorizontalAlignment および VerticalAlignment を介して制御されます。レイアウトがフレックスレイアウトを使用するように構成されている場合は、flex layout を使用するように構成する必要があります。

フレックスベースサイズ、フレックスサイズ、ラインラッピングを計算するには、追加の計算が必要になるため、フレックスを有効にしたリストレイアウトを使用すると、パフォーマンスに影響があることに注意してください。フレックスは、次のプロパティが設定する定されているとき、または任意の 兄弟がそれに親属しているときに、 に有効になっています:

概要

プロパティ

UIGridStyleLayout から継承した プロパティ

プロパティ

HorizontalFlex

並列読み取り

リストレイアウトの FillDirectionEnum.FillDirection.Horizontal に設定されると、HorizontalFlex プロパティは親コンテナに余分な横スペースを配布する方法を指定します。


<th>兄弟の動作</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|None</code></td>
<td>フレックス行動なし; 兄弟は定義された幅を維持します。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>
<td>兄弟は横に拡大して、親コンテナ全体を埋め、定義された幅を上書きします。列にある兄弟の数は変更されない;たとえば、3人の兄弟が <code>Enum.UIFlexAlignment.None|None</code> 設定の下で容器の幅内に横向きに収まる場合、それらの3人の兄弟は全幅を埋めるために再サイズ化されます。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>
<td>兄弟は定義された幅を維持します。各兄弟の両側に均等なスペースが追加されます。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>
<td>兄弟は定義された幅を維持します。同じ距離が 兄弟の間に追加されますが、追加のスペースは 兄弟の周りに追加されません。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly</code></td>
<td>兄弟は定義された幅を維持します。平等なスペースが、兄弟の間の と および兄弟の周りの に追加されます。</td>
</tr>
</tbody>
設定
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
クロス方向の動作

In 縦型 リストレイアウト ( FillDirection 設定して Enum.FillDirection.Vertical )で、HorizontalFlex プロパティは、 横向き交差方向 で兄弟をどのように配布するかを指定します。このレイアウトでは、Enum.UIFlexAlignment.Fill の設定が、縦方向のスペースが VerticalFlex に従うときに、兄弟が全体の横方向のスペースを埋めるようにします。

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
自動サイズ交互作用

If が の子に有効になっている場合、それは「自動フレックスベース」と解釈され、成長または縮小できる のサイズを定義します。

GuiObject.AutomaticSizeUIListLayout の子に有効になっている場合、 クロス方向 で "自動クロスサイズ"として解釈され、すべての子のコンテンツをクロス方向に含むために必要な最小サイズを定義します。

ItemLineAlignment

並列読み取り

フレックスレイアウト では、ライン内の兄弟の 交差方向の 配置を定義します。ビジュアル例は、Enum.ItemLineAlignment


<th>兄弟の動作</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.ItemLineAlignment.Automatic|Automatic</code></td>
<td>レイアウトの兄弟または特定の <code>Class.UIFlexItem</code> 親をレイアウトの <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> または <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code> に合わせ、クラスの <code>Class.UIListLayout.FillDirection|FillDirection</code> によって異なります。</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Start|Start</code></td>
<td>レイアウトの兄弟や特定の <code>Class.UIFlexItem</code> 親を横向きの埋めや、線の <b>上部</b> または縦向きの埋めに線の <b>左</b> に配置します。</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Center|Center</code></td>
<td>レイアウトの兄弟または特定の <code>Class.UIFlexItem</code> 親を横または縦の満たしでラインの <b>中央</b> に配置します。</td>
</tr>
<tr>
<td><code>Enumer.ItemLineAlignment.End|End</code></td>
<td>レイアウトの兄弟や特定の <code>Class.UIFlexItem</code> 親を横向きの埋めや線の <b>下部</b> に縦向きの埋めに沿わせ、または線の <b>右</b> に縦向きの埋めに沿わせます。</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Stretch|ストレッチ</code></td>
<td>レイアウトの兄弟または特定の <code>Class.UIFlexItem</code> 親を横または縦に満たすために、ライン全体の横向きまたは縦向きの交差を埋める</td>
</tr>
</tbody>
設定
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

並列読み取り

各要素間の空間量を決定し、スケール(現在の方向で親のサイズのパーセンテージ)またはオフセット(ピクセルサイズに似た静的スペース値)のいずれかに設定します。

並列読み取り

リストレイアウトの FillDirectionEnum.FillDirection.Vertical に設定されると、VerticalFlex プロパティは親コンテナで余分な縦スペースを配布する方法を指定します。


<th>兄弟の動作</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|None</code></td>
<td>フレックス行動なし; 兄弟は定義された高さを維持します。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>
<td>兄弟は垂直にサイズを変更して、親コンテナ全体を埋め、定義された高さを上書きします。列にいる姉妹の数は変更されない;たとえば、3人の姉妹が <code>Enum.UIFlexAlignment.None|None</code> 設定の下で容器の高さ内に縦に収まる場合、それらの3人の姉妹は全体を埋めるために再サイズ化されます。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>
<td>兄弟は定義された高さを維持します。各兄弟の両側に均等なスペースが追加されます。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>
<td>兄弟は定義された高さを維持します。同じ距離が 兄弟の間に追加されますが、追加のスペースは 兄弟の周りに追加されません。</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly</code></td>
<td>兄弟は定義された高さを維持します。平等なスペースが、<b>と</b> および <b>の間</b> および兄弟の周りに追加されます。</td>
</tr>
</tbody>
設定
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
クロス方向の動作

横向き リストレイアウト ( FillDirectionEnum.FillDirection.Horizontal に設定) では、VerticalFlex プロパティが、 垂直な交差方向 で兄弟をどのように配布するかを指定します。このレイアウトでは、Enum.UIFlexAlignment.Fill の設定が、横向きスペースを埋めるのに対して、縦向きスペースは HorizontalFlex に従います。

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
自動サイズ交互作用

If が の子に有効になっている場合、それは「自動フレックスベース」と解釈され、成長または縮小できる のサイズを定義します。

GuiObject.AutomaticSizeUIListLayout の子に有効になっている場合、 クロス方向 で "自動クロスサイズ"として解釈され、すべての子のコンテンツをクロス方向に含むために必要な最小サイズを定義します。

Wraps

並列読み取り

親コンテナ内の兄弟が親コンテナの幅/高さの境界を超えたときに他の行に包まれるかどうかを制御します。Controls whether siblings within the parent container wrap to another line when their default size exceeds the width/height of the container's bounds.

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

方法

イベント