UIListLayout

Hiển Thị Bản Đã Lỗi Thời

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Một UIListLayout vị trí anh em UI trong các hàng hoặc cột trong parent UI container, dựa trên FillDirection .Các thuộc tính và của mỗi anh em sinh đều bị bỏ qua hoặc bị thay thế bởi bố trí danh sách, trong khi mỗi anh em giữ lại thuộc tính được định nghĩa của nó trừ khi bố trí được cấu hình để sử dụng bố trí flex.Xem Danh sách và bố trí Flex để biết thêm thông tin.

UIListLayouts illustrating FillDirection of either horizontal
or vertical.

Để kiểm soát trật tự xếp đặt của các anh em, hãy đặt SortOrder thành Enum.SortOrder.Name hoặc Enum.SortOrder.LayoutOrder , sau đó đổi tên anh em theo thứ tự chữ cái hoặc đặt giá trị LayoutOrder của họ, tương ứng.UIListLayout sẽ tự động sắp xếp lại các yếu tố khi các yếu tố được thêm vào/xóa, hoặc nếu các yếu tố của anh em thay đổi Name hoặc LayoutOrder .

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

Khoảng cách giữa các anh em được kiểm soát thông qua thuộc tính Padding và bọc trong giới hạn của thùng chứa cha thông qua Wraps boolean.Sự căn chỉnh của các anh em trong thùng cha được kiểm soát thông qua HorizontalAlignmentVerticalAlignment trừ khi bố trí được cấu hình để sử dụng một bố trí linh hoạt .

Lưu ý rằng có những hậu quả về hiệu suất của việc sử dụng một bảng bố trí có khả năng linh hoạt, vì cần thêm các tính toán để tính kích thước cơ sở linh hoạt, kích thước linh hoạt và cuộn dòng.Flex được bật trên một UIListLayout khi các thuộc tính sau đây được cài đặt, hoặc nếu bất kỳ anh em GuiObject nào có một UIFlexItem bố mẹ cho nó:

Tóm Tắt

Thuộc Tính

Thuộc Tính kế thừa từ UIGridStyleLayout

Thuộc Tính

HorizontalFlex

Đọc Song Song

Khi bố trí danh sách FillDirection được đặt thành Enum.FillDirection.Horizontal , thuộc tính HorizontalFlex định cách phân phối thêm không gian ngang trong thùng chứa cha.


<th>Hành vi anh em ruột</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|Không có</code></td>
<td>Không có hành vi flex; các anh em duy trì chiều rộng được xác định của họ.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>
<td>Các anh em thay đổi kích thước ngang để lấp đầy toàn bộ thùng chứa cha, vượt qua chiều rộng được định nghĩa của chúng.Số anh em trong một hàng vẫn không thay đổi; ví dụ, nếu ba anh em phù hợp theo chiều ngang trong chiều rộng của thùng chứa dưới cài đặt <code>Enum.UIFlexAlignment.None|None</code>, ba anh em sẽ thay đổi kích cỡ để lấp đầy toàn bộ chiều rộng.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|Không gian xung quanh</code></td>
<td>Các anh em duy trì chiều rộng được xác định của họ. Khoảng cách bằng nhau được thêm vào cả hai bên của mỗi anh em.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|Không gian giữa|SpaceBetween</code></td>
<td>Các anh em duy trì chiều rộng được xác định của họ.Khoảng cách bằng nhau được thêm <b>giữa</b> các anh em, nhưng không thêm không gian bổ sung <b>xung quanh</b> các anh em.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceThậm chí|SpaceEvenly</code></td>
<td>Các anh em duy trì chiều rộng được xác định của họ. Khoảng cách bằng nhau được thêm vào cả <b>giữa</b> và <b>xung quanh</b> các anh em.</td>
</tr>
</tbody>
Cài đặt
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
Hành vi theo chiều ngang

Trong bố trí danh sách dọc ( FillDirection được đặt thành Enum.FillDirection.Vertical ), thuộc tính HorizontalFlex định cách phân phối các em họ trên toàn bộ hướng ngang dọc .Trong các bố trí như vậy, một cài đặt của Enum.UIFlexAlignment.Fill khiến các em họ lấp đầy toàn bộ không gian ngang trong khi khoảng cách dọc tuân theo VerticalFlex .

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
Tương tác kích thước tự động

Nếu GuiObject.AutomaticSize được bật cho một con của UIListLayout trong FillDirection , nó được giải thích là "cơ sở linh hoạt tự động" và nó xác định kích thước của GuiObject mà nó có thể phát triển hoặc thu nhỏ.

Nếu GuiObject.AutomaticSize được bật cho một con của UIListLayout trong chiều chéo , nó được giải thích là "kích thước chéo tự động" và nó xác định kích thước tối thiểu cần thiết để chứa tất cả nội dung con trong chiều chéo.

ItemLineAlignment

Đọc Song Song

Trong một bố trí linh hoạt, xác định sự xếp hàng theo chiều ngang của các anh em trong một dòng. Xem Enum.ItemLineAlignment đối với ví dụ hình ảnh.


<th>Hành vi anh em ruột</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.ItemLineAlignment.Tự động|Tự động</code></td>
<td>Xếp hạng các anh em của bố trí hoặc <code>Class.UIFlexItem</code> cha cụ thể cho bố trí của <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> hoặc <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code>, tùy thuộc vào định hướng <code>Class.UIListLayout.FillDirection|FillDirection</code> của nó.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Start|Bắt đầu</code></td>
<td>Xếp hàng các anh em của bố trí hoặc cụ thể <code>Lớp.UIFlexItem</code> cha cho dòng <b>trên cùng</b> ở một cột dọc hoặc dòng <b>bên trái</b> ở một cột ngang.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Center|Trung tâm|Trung tâm</code></td>
<td>Xếp hàng các anh em của bố trí hoặc Class.UIFlexItem cha cụ thể của dòng vào giữa dòng theo chiều ngang hoặc chiều dọc trong một lấp lánh ngang hoặc dọc.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.End|Kết thúc</code></td>
<td>Xếp hàng liên quan của bố trí hoặc cụ thể <code>Lớp.UIFlexItem</code> cha cho dòng <b>dưới cùng</b> ở một cột điền ngang hoặc dòng <b>bên phải</b> ở một cột điền dọc.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Stretch|Nới ra</code></td>
<td>Giãn các anh em của bố trí hoặc cụ thể <code>Class.UIFlexItem</code> cha để lấp đầy toàn bộ chiều dọc của dòng trong một lưới ngang hoặc dọc.</td>
</tr>
</tbody>
Cài đặt
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

Đọc Song Song

Xác định số lượng không gian trống giữa mỗi thành phần, đặt thành một tỷ lệ (phần trăm kích thước của cha trong hướng hiện tại) hoặc một khoản trừ (giá trị khoảng cách tĩnh tương tự như kích thước pixel).

Đọc Song Song

Khi bố trí danh sách FillDirection được đặt thành Enum.FillDirection.Vertical , thuộc tính VerticalFlex định cách phân phối thêm không gian dọc trong thùng chứa cha.


<th>Hành vi anh em ruột</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|Không có</code></td>
<td>Không có hành vi flex; các anh em duy trì chiều cao được xác định của họ.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>
<td>Các anh em thay đổi kích thước theo chiều dọc để lấp đầy toàn bộ thùng chứa cha, vượt qua chiều cao được xác định của chúng.Số anh em trong một cột vẫn không thay đổi; ví dụ, nếu ba anh em phù hợp theo chiều dọc trong chiều cao của thùng chứa dưới cài đặt <code>Enum.UIFlexAlignment.None|None</code>, ba anh em sẽ thay đổi kích cỡ để lấp đầy toàn bộ chiều cao.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|Không gian xung quanh</code></td>
<td>Các anh em duy trì chiều cao được xác định của họ. Khoảng cách bằng nhau được thêm vào cả hai bên của mỗi anh em.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|Không gian giữa|SpaceBetween</code></td>
<td>Các anh em duy trì chiều cao được xác định của họ.Khoảng cách bằng nhau được thêm <b>giữa</b> các anh em, nhưng không thêm không gian bổ sung <b>xung quanh</b> các anh em.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceThậm chí|SpaceEvenly</code></td>
<td>Các anh em duy trì chiều cao được xác định của họ. Khoảng cách bằng nhau được thêm vào cả <b>giữa</b> và <b>xung quanh</b> các anh em.</td>
</tr>
</tbody>
Cài đặt
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
Hành vi theo chiều ngang

Trong bố trí danh sách ngang ( FillDirection đặt thành Enum.FillDirection.Horizontal ), thuộc tính VerticalFlex xác định cách phân phối các em họ trên đường chéo ngang vertical .Trong các bố trí như vậy, một cài đặt của Enum.UIFlexAlignment.Fill khiến các em họ lấp đầy toàn bộ không gian ngang trong khi khoảng cách ngang tuân theo HorizontalFlex .

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
Tương tác kích thước tự động

Nếu GuiObject.AutomaticSize được bật cho một con của UIListLayout trong FillDirection , nó được giải thích là "cơ sở linh hoạt tự động" và nó xác định kích thước của GuiObject mà nó có thể phát triển hoặc thu nhỏ.

Nếu GuiObject.AutomaticSize được bật cho một con của UIListLayout trong chiều chéo , nó được giải thích là "kích thước chéo tự động" và nó xác định kích thước tối thiểu cần thiết để chứa tất cả nội dung con trong chiều chéo.

Wraps

Đọc Song Song

Kiểm soát xem liệu các anh em trong thùng chứa cha có bị bọc vào một dòng khác khi kích thước mặc định vượt quá chiều rộng/chiều cao của giới hạn của thùng chứa hay không.

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

Phương Pháp

Sự Kiện