UIListLayout

แสดงที่เลิกใช้งานแล้ว

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

ตําแหน่งพี่น้อง UI ในแถวหรือคอลัมภ์ภายในคอนเทนเนอร์ UI พ่อแม่ตาม UIListLayout โดยใช้ FillDirectionคุณสมบัติ และ ของแต่ละพี่น้องจะถูกเพิกเฉยหรือถูกแทนที่โดยการจัดเรียงรายการในขณะที่แต่ละพี่น้องยังคงรักษาคุณสมบัติที่กำหนดไว้ไว้ ยกเว้นว่าการจัดเรียงไม่ได้กำหนดการใช้การจัดเรียงแบบยืดหยุ่นดู รายการและเลย์เอาต์ยืดหยุ่น สำหรับข้อมูลเพิ่มเติม

UIListLayouts illustrating FillDirection of either horizontal
or vertical.

เพื่อควบคุมลำดับการจัดเรียงของพี่น้อง ให้ตั้ง SortOrder เป็น Enum.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

โปรดทราบว่ามีผลกระทบด้านประสิทธิภาพของการใช้รูปแบบรายการแบบยืดหยุ่น flex‑enabled เนื่องจากจำเป็นต้องทำการคำนวณเพิ่มเติมเพื่อคำนวณขนาดฐานยืด ขนาดยืด และการห่อบรรจุฟลิกซ์เปิดใช้งานบน เมื่อมีการตั้งค่าคุณสมบัติต่อไปนี้ หรือหากพี่น้องคนใดมีพ่อแม่เป็น กับมัน:

และ/หรือ ไม่ได้ถูกตั้งค่าเป็น ไม่
ItemLineAlignment ไม่ได้ ไม่ได้ ตั้งค่าเป็น Enum.ItemLineAlignment.Automatic
Wraps is true .

สรุป

คุณสมบัติ

HorizontalFlex:Enum.UIFlexAlignment
อ่านพร้อมๆ กัน
ควบคุมวิธีการจัดส่งพื้นที่แนวนอนเพิ่มเติม
ItemLineAlignment:Enum.ItemLineAlignment
อ่านพร้อมๆ กัน
ในการจัดเรียงแบบยืดหยุ่น กำหนดการจัดเรียงแบบ สันนิษฐาน ของพี่น้องภายในเส้น
Padding:UDim
อ่านพร้อมๆ กัน
จำนวนพื้นที่ว่างระหว่างแต่ละองค์ประกอบ
VerticalFlex:Enum.UIFlexAlignment
อ่านพร้อมๆ กัน
ควบคุมวิธีการจัดส่งพื้นที่แนวตั้งเพิ่มเติม
Wraps:boolean
อ่านพร้อมๆ กัน
ควบคุมว่าพี่น้องภายในภาชนะรอบรับพ่อแม่จะควบคุมได้หรือไม่

คุณสมบัติรับทอดมาจากUIGridStyleLayout

AbsoluteContentSize:Vector2
อ่านอย่างเดียว
ไม่ซ้ำ
ขนาดสัมบูรณ์ของพื้นที่ที่ถูกใช้โดยการจัดเรียงกริด
FillDirection:Enum.FillDirection
อ่านพร้อมๆ กัน
กำหนดแกนที่ UI จะถูกวางออก
HorizontalAlignment:Enum.HorizontalAlignment
อ่านพร้อมๆ กัน
กำหนดการจัดเรียงแนวนอนขององค์ประกอบ UI ภายในองค์ประกอบพ่วง
SortOrder:Enum.SortOrder
อ่านพร้อมๆ กัน
กำหนดลำดับที่วัตถุ UI เด็กจะถูกวางในเลย์เอาต์
VerticalAlignment:Enum.VerticalAlignment
อ่านพร้อมๆ กัน
กำหนดการจัดตำแหน่งแนวตั้งขององค์ประกอบ UI ภายในองค์ประกอบพ่วง

ดูทั้งหมดที่รับทอดมาจาก Instance

ดูทั้งหมดที่รับทอดมาจาก Object

วิธีการ

ดูทั้งหมดที่รับทอดมาจาก Instance

ดูทั้งหมดที่รับทอดมาจาก Object

อีเวนต์

ดูทั้งหมดที่รับทอดมาจาก Instance

ดูทั้งหมดที่รับทอดมาจาก Object

คุณสมบัติ

HorizontalFlex

Enum.UIFlexAlignment

อ่านพร้อมๆ กัน

เมื่อเลย์เอาต์รายการ FillDirection ถูกตั้งค่าเป็น Enum.FillDirection.Horizontal คุณสมบัติ HorizontalFlex จะระบุวิธีการจัดส่งพื้นที่แนวนอนเพิ่มเติมในคอนเทนเนอร์ราก


<th>พฤติกรรมของพี่น้อง</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td><code>Enum.UIFlexAlignment.None|ไม่มี</code></td>

    <td>ไม่มีพฤติกรรมยืด; พี่น้องรักษาความกว้างที่กำหนดไว้</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignment.Fill|กรอก</code></td>

    <td>พี่น้องปรับขนาดใหม่ในแนวนอนเพื่อเติมทั้งหมดในภาชนะบรรจุแม่ โดยแทนที่ความกว้างที่กำหนดไว้จํานวนพี่น้องในแถวยังคงไม่เปลี่ยนแปลง; ตัวอย่างเช่น หากพี่น้องสามคนพอดีกับแนวนอนภายในความกว้างของคอนเทนเนอร์ภายใต้การตั้งค่า <code>Enum.UIFlexAlignment.None|None</code> พวกสามพี่น้องจะปรับขนาดให้เต็มความกว้าง</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>

    <td>พี่น้องรักษาความกว้างที่กำหนดไว้ ระยะห่างเท่ากันถูกเพิ่มทั้งสองด้านของพี่น้องแต่ละคน</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>

    <td>พี่น้องรักษาความกว้างที่กำหนดไว้ช่องว่างเท่ากันถูกเพิ่ม <b>ระหว่าง</b> พี่น้อง แต่ไม่มีพื้นที่เพิ่มเติมถูกเพิ่ม <b>รอบ</b> พี่น้อง</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.

พฤติกรรมข้ามทิศทาง

ใน แนวตั้ง รูปแบบรายการ ( 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.

การโต้ตอบขนาดอัตโนมัติ

หาก GuiObject.AutomaticSize เปิดใช้งานสําหรับลูกของ UIListLayout ใน FillDirection จะถูกแปลเป็น "ฐานยืดอัตโนมัติ" และกําหนดขนาดของ GuiObject ที่สามารถเติบโตหรือหดได้

หาก GuiObject.AutomaticSize ถูกเปิดใช้งานสำหรับลูกของ UIListLayout ใน ทิศทางข้าม จะถูกแปลเป็น "ขนาดคงที่อัตโนมัติ" และกำหนดขนาดขั้นต่ำที่จำเป็นในการบรรจุเนื้อหาทั้งหมดของลูกในทิศทางข้าม

ItemLineAlignment

Enum.ItemLineAlignment

อ่านพร้อมๆ กัน

ในการจัดเรียงแบบยืดหยุ่น กำหนดการจัดเรียงแบบ ข้ามทิศทาง ของพี่น้องภายในบรรทัด ดู Enum.ItemLineAlignment สำหรับตัวอย่างภาพ


<th>พฤติกรรมของพี่น้อง</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td><code>Enum.ItemLineAlignment.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|เริ่ม</code></td>

    <td>จัดเรียงพี่น้องของเลย์เอาต์หรือคลาส Class.UIFlexItem พิเศษให้ตรงกับส่วนบนสุดของบรรทัดในการเติมแนวนอนหรือส่วนล่างสุดของบรรทัดในการเติมแนวตั้ง</td>
  </tr>

  <tr>
    <td><code>Enum.ItemLineAlignment.Center|Center
    (ไทย)
    (English)
    (Thai)
    (อังกฤษ)</code></td>

    <td>จัดเรียงพี่น้องของเลย์เอาต์หรือคลาส Class.UIFlexItem พิเศษให้ตรงกับจุดศูนย์กลางของบรรทัดในการเติมแนวนอนหรือแนวตั้ง</td>
  </tr>

  <tr>
    <td><code>Enum.ItemLineAlignment.End|End</code></td>

    <td>จัดเรียงพี่น้องของเลย์เอาต์หรือคลาส Class.UIFlexItem พิเศษให้ตรงกับส่วนที่ด้านล่างของบรรทัดในการเติมแนวนอนหรือส่วนที่ด้านขวาของบรรทัดในการเติมแนวตั้ง</td>
  </tr>

  <tr>
    <td><code>Enum.ItemLineAlignment.Stretch|Stretch</code></td>

    <td>ยืดพี่น้องของเลย์เอาต์หรือคลาส <code>Class.UIFlexItem</code> พิเศษเพื่อเติมทั้งส่วนข้ามของเส้นในแนวนอนหรือแนวตั้ง</td>
  </tr>
</tbody>

การตั้งค่า

Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

UDim

อ่านพร้อมๆ กัน

กำหนดปริมาณพื้นที่ว่างระหว่างแต่ละองค์ประกอบ ตั้งค่าเป็นเครื่องชั่ง (เปอร์เซ็นต์ของขนาดของผู้ปกครองในทิศทางปัจจุบัน) หรือออฟเซ็ต (ค่าช่องว่างคงที่คล้ายกับขนาดพิกเซล)

VerticalFlex

Enum.UIFlexAlignment

อ่านพร้อมๆ กัน

เมื่อเลย์เอาต์รายการ FillDirection ถูกตั้งค่าเป็น Enum.FillDirection.Vertical คุณสมบัติ VerticalFlex จะระบุวิธีการจัดส่งพื้นที่แนวตั้งเพิ่มเติมในคอนเทนเนอร์ราก


<th>พฤติกรรมของพี่น้อง</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td><code>Enum.UIFlexAlignment.None|ไม่มี</code></td>

    <td>ไม่มีพฤติกรรมยืดหยุ่น; พี่น้องรักษาความสูงที่กำหนดไว้</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignment.Fill|กรอก</code></td>

    <td>พี่น้องปรับขนาดใหม่ในแนวตั้งเพื่อเติมทั้งหมดในภาชนะรอง โดยแทนที่ความสูงที่กำหนดไว้จํานวนพี่น้องในคอลัมน์ยังคงไม่เปลี่ยนแปลง; ตัวอย่างเช่นหากพี่น้องสามคนพอดีกับแนวตั้งภายในความสูงของคอนเทนเนอร์ภายใต้การตั้งค่า <code>Enum.UIFlexAlignment.None|None</code> พวกสามพี่น้องจะปรับขนาดให้เต็มทั้งความสูง</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>

    <td>พี่น้องรักษาความสูงที่กำหนดไว้ ระยะห่างเท่ากันถูกเพิ่มทั้งสองด้านของพี่น้องแต่ละคน</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>

    <td>พี่น้องรักษาความสูงที่กำหนดไว้ช่องว่างเท่ากันถูกเพิ่ม <b>ระหว่าง</b> พี่น้อง แต่ไม่มีพื้นที่เพิ่มเติมถูกเพิ่ม <b>รอบ</b> พี่น้อง</td>
  </tr>

  <tr>
    <td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly</code></td>

    <td>พี่น้องรักษาความสูงที่กำหนดไว้ ระยะห่างเท่ากันถูกเพิ่มทั้งระหว่าง และ พี่น้องรอบ ระยะห่าง</td>
  </tr>
</tbody>

การตั้งค่า

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

พฤติกรรมข้ามทิศทาง

ใน รูปแบบรายการแนวนอน ( ตั้งค่าเป็น ) คุณสมบัติ จะระบุวิธีการจัดส่งพี่น้องข้ามทิศทางแนวตั้ง ทั้งหมดในการจัดเตรียมดังกล่าวการตั้งค่า Enum.UIFlexAlignment.Fill ทำให้พี่น้องเติมพื้นที่แนวตั้งทั้งหมดในขณะที่ช่องว่างแนวนอนปฏิบัติตาม HorizontalFlex