UIListLayout จะจัดตำแหน่ง GuiObjects ที่อยู่ติดกันเป็นแถวแนวนอนหรือแนวตั้งภายในคอนเทนเนอร์หลักของพวกเขา เมื่อใดก็ตามที่คุณเพิ่มหรือลบวัตถุที่อยู่ติดกัน เลย์เอาท์จะปรับตัวตามนั้น
เมื่อคุณแทรก UIListLayout มันจะเขียนทับหรือมีอิทธิพลต่อ Position, Rotation, และ/หรือ Size ของวัตถุ UI ที่อยู่ติดกันทั้งหมด ดังนั้นการเปลี่ยนแปลงในคุณสมบัติเหล่านั้นภายในหน้าต่าง Properties หรือภายในสคริปต์จะไม่เกิดผลตามปกติ
ทิศทางการเติม
คุณสมบัติ FillDirection จะกำหนดทิศทางที่วัตถุที่อยู่ติดกันในเลย์เอาท์รายการจะถูกเรนเดอร์
การจัดเรียงจะถูกกำหนดโดยคุณสมบัติ SortOrder ของเลย์เอาท์ ซึ่งสามารถเป็น ตัวเลขที่เพิ่มขึ้น ซึ่งขึ้นอยู่กับค่า LayoutOrder ของแต่ละรายการหรือ อัลฟา-นัมเบอร์ ขึ้นอยู่กับ Name ของรายการนั้น
หากคุณต้องการสลับลำดับของวัตถุ เช่น การจัดเรียงจากขวาไปซ้ายในรายการแนวนอน คุณจะต้องย้อนการจัดเรียงนั้น ตัวอย่างเช่น หากมีรายการสี่รายการที่จัดเรียงตาม LayoutOrder คือ 0, 1, 2, 3 ตามลำดับ ให้แปลงค่าเหล่านั้นเป็น 0, -1, -2, -3
การจัดแนว
คุณสมบัติ HorizontalAlignment และ VerticalAlignment จะกำหนดการจัดแนว X และ Y ของวัตถุที่อยู่ติดกันในสัมพันธ์ต่อกันและกับขอบเขตโดยรวมของรายการภายในคอนเทนเนอร์ของมัน ตัวอย่างเช่น รายการที่เต็มในแนวนอนด้วย VerticalAlignment ที่ตั้งเป็น Center จะจัดแนววัตถุที่อยู่ติดกันในแนวนอนเข้ากับกัน และ ศูนย์กลางรายการในแนวตั้งภายในคอนเทนเนอร์
HorizontalAlignment และ VerticalAlignment จะแตกต่างกันเล็กน้อยจาก การจัดแนวแถวรายการ ในเลย์เอาท์ flex ซึ่งคุณสามารถจัดแนวไอเท็มในแถวเดียวกันโดยไม่ต้องจัดการจัดแนวกลับไปยังขอบเขตรวมของรายการในคอนเทนเนอร์
การห่อ
คุณสมบัติ Wraps ที่เป็นชนิดบูลีนจะควบคุมว่าวัตถุที่อยู่ติดกันภายในคอนเทนเนอร์หลักจะห่อไปที่บรรทัดใหม่เมื่อขนาดเริ่มต้นของพวกมันเกินความกว้าง/ความสูงของขอบเขตของคอนเทนเนอร์หรือไม่
การpadding
คุณสมบัติ Padding จะกำหนดจำนวนพื้นที่ว่าง ระหว่าง รายการในรายการแต่ละรายการ ตั้งค่าเป็นอัตราส่วน (เปอร์เซ็นต์ของขนาดของคอนเทนเนอร์ในทิศทางปัจจุบัน) หรือการเลื่อน (ค่าเว้นว่างแบบคงที่ที่คล้ายกับขนาดพิกเซล)
คุณสมบัตินี้ไม่สามารถใช้การpadding รอบ ขอบเขตโดยรวมของรายการ; ดูที่ UIPadding เพื่อใช้การpadding ด้านบน, ด้านล่าง, ด้านซ้าย, และ/หรือด้านขวาต่อเนื้อหาของแม่
เลย์เอาท์แบบยืดหยุ่น
การรวม flex เข้าไปใน UIListLayout เป็นวิธีที่ทรงพลังในการ เติม/กระจายอย่างเท่าเทียมกัน หรือ จัดแนว/ขยาย รายการในรายการข้ามไลน์ของพวกเขา หรือลากรายการเฉพาะใน flex ข้ามพื้นที่ที่แปรผัน
ในขณะที่ flex เป็นเครื่องมือที่ทรงพลัง คุณไม่ควรใช้มันกับ UIListLayout โดยไม่มีเหตุผล เนื่องจากมันเพิ่มค่าใช้จ่ายด้านประสิทธิภาพเล็กน้อยกว่าที่ไม่มีการตั้งค่าที่เป็น flex โดยเฉพาะเมื่อมีการเปลี่ยนขนาดเลย์เอาท์หรือมีการเพิ่ม/ลบไอเท็มแบบยืดหยุ่น
นอกจากนี้ เลย์เอาท์ กริด อาจเป็นทางเลือกที่ดีกว่าเมื่อรายการควรจัดเรียงตามกริดในทั้งทิศทาง X และ Y เนื่องจากเลย์เอาท์กริดบังคับใช้ขนาดเซลล์ที่สม่ำเสมอในขณะที่เลย์เอาท์แบบยืดหยุ่นอาจใช้จำนวนรายการที่แปรผันในแต่ละแถว
เติมหรือกระจายอย่างเท่าเทียมกัน
เมื่อ ทิศทางการเติม ของเลย์เอาท์รายการถูกตั้งค่าเป็น Horizontal, คุณสมบัติ HorizontalFlex จะระบุวิธีการกระจายพื้นที่แนวนอนเพิ่มเติมในคอนเทนเนอร์หลัก คล้ายกัน เมื่อทิศทางการเติมถูกตั้งค่าเป็น Vertical, จะระบุพื้นที่แนวตั้งเพิ่มเติมที่จะกระจายด้วยคุณสมบัติ VerticalFlex.
การใช้ HorizontalFlex ที่แสดงให้เห็นถึงการใช้งานที่เป็นจริงคือ หน้าต่างแบบแท็บ ที่ฟลักซ์จะเติมแถบแท็บอย่างเท่าเทียมกันโดยไม่คำนึงถึงจำนวนแท็บ วิธีนี้ง่ายที่สุดเมื่อเปรียบเทียบกับฟลักซ์ในกรณีนี้เพราะมันคำนวณความกว้างของแต่ละแท็บโดยอัตโนมัติโดยไม่ต้องมีการตั้งค่าความกว้างจากนักพัฒนา และยังปรับตัวอัตโนมัติหากจำนวนแท็บเปลี่ยนแปลง
การจัดแนวแถวรายการ
คุณสมบัติ ItemLineAlignment จะกำหนดการจัดแนว ข้ามทิศทาง ของวัตถุที่อยู่ติดกันในแถว โดยให้คุณจัดแนววัตถุที่มีความกว้าง/สูงต่างกันหรือทำให้วัตถุที่มีความกว้าง/สูงน้อยกว่ากระจายเต็มบรรทัดของพวกมัน
กรณีการใช้งานจริงหนึ่งสำหรับ ItemLineAlignment คือการขยายชุดของกระเบื้องขนาดไม่เท่ากันเพื่อเติมบรรทัดทั้งหมดของพวกเขา (Stretch) ทำให้เลย์เอาท์เป็นระเบียบมากขึ้น
การยืดหยุ่นของรายการเฉพาะ
ในขณะที่การยืดหยุ่นเลย์เอาท์ทั้งหมดเป็นเครื่องมือที่ทรงพลัง เลย์เอาท์บางประเภทเหมาะสมกว่าการ ยืดหยุ่นรายการเฉพาะ ในเลย์เอาท์ดังกล่าว วัตถุบางรายการในรายการจะรักษาขนาดหลักของพวกมันในขณะที่รายการอื่นๆ ยืดหยุ่นเพื่อเติมพื้นที่ที่แปรผัน หนึ่งในการใช้งานที่เป็นไปได้คือวิดเจ็ตแถบเลื่อนที่มี ป้ายชื่อ ที่สม่ำเสมออยู่ทั้งสองด้านและแถบเลื่อนที่ยืดหยุ่นเพื่อเติมความกว้างทั้งหมดระหว่าง
ในการตั้งค่ารายการในรายการว่าเป็นแบบยืดหยุ่น ให้แทรก UIFlexItem เป็นลูกของวัตถุที่ยืดหยุ่น จากนั้นตั้งค่าคุณสมบัติ FlexMode ของมันเป็น Fill, Grow, Shrink, หรือ Custom.
