ตั้งค่าลักษณะการทำงานของคอนเทนเนอร์

หากต้องการกำหนดค่าลักษณะการทำงานของคอนเทนเนอร์ FlexBox ให้สร้างบล็อก FlexBoxConfig และระบุโดยใช้พารามิเตอร์ config

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}
FlexBoxSnippets.kt

ใช้ FlexBoxConfig เพื่อกำหนดทิศทางของเลย์เอาต์ ลักษณะการตัดข้อความ การจัดแนว และช่องว่างระหว่างรายการ

ทิศทางของเลย์เอาต์

ฟังก์ชัน direction จะตั้งค่าแกนหลัก ซึ่งจะกำหนดทิศทางที่รายการจะจัดวาง โดยค่าที่ใช้ได้มีดังนี้

• Row (ค่าเริ่มต้น): ตั้งค่าแกนหลักเป็นแนวนอน ในภาษาที่เขียนจากซ้ายไปขวา การปัดนี้จะเป็นการปัดจากซ้ายไปขวา และจะตรงกันข้ามในภาษาที่เขียนจากขวาไปซ้าย
• RowReverse: กลับทิศทางของ Row
• Column: ตั้งค่าแกนหลักเป็นแนวตั้งจากบนลงล่าง
• ColumnReverse: กลับทิศทางของ Column

จัดแนวรายการและกระจายพื้นที่ว่างเพิ่มเติม

ส่วนต่อไปนี้จะอธิบายวิธีจัดแนวรายการและกระจายพื้นที่ว่างเพิ่มเติมตามแกนหลักและแกนไขว้

ตามแนวแกนหลัก

ใช้ justifyContent เพื่อกระจายรายการตามแนวแกนหลัก ตารางต่อไปนี้แสดงลักษณะการทำงานเมื่อทิศทางเป็น Row

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

ตามแนวแกนไขว้

ใช้ alignItems เพื่อจัดแนวรายการตามแนวแกนไขว้ภายในบรรทัดเดียว คุณสามารถลบล้างลักษณะการทำงานนี้ได้โดยใช้ตัวแก้ไข alignSelf กับแต่ละรายการ

รูปภาพต่อไปนี้แสดงลักษณะการทำงานเมื่อทิศทางเป็นRow

	Start	End	Center	Stretch	Baseline

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

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

รวมรายการ

การตัดข้อความช่วยให้คอนเทนเนอร์ FlexBox มีหลายบรรทัดได้ โดยจะย้ายรายการที่ไม่พอดีไปยังแถวหรือคอลัมน์ใหม่ตามแนวแกนไขว้ กำหนดค่าลักษณะการตัดข้อความโดยใช้ wrap

ค่า FlexWrap	ตัวอย่างการใช้ทิศทาง Row
NoWrap (ค่าเริ่มต้น): ป้องกันไม่ให้รายการตัดขึ้นบรรทัดใหม่ รายการจะล้นหากขนาดหลักไม่เพียงพอ
Wrap: เมื่อมีพื้นที่ไม่เพียงพอสำหรับรายการ (รวมถึงช่องว่าง) ระบบจะสร้างบรรทัดใหม่ในทิศทางของแกนขวาง ตัวอย่างเช่น หากทิศทางคือ Row ระบบจะเพิ่มบรรทัดใหม่ด้านล่าง
WrapReverse: เหมือนกับ Wrap ยกเว้นว่าจะมีการเพิ่มบรรทัดใหม่ในทิศทางตรงกันข้ามกับแกนขวาง เช่น หากทิศทางคือ Row ระบบจะเพิ่มบรรทัดใหม่ด้านบน

ตัวอย่างต่อไปนี้แสดงวิธีการทำงานของอัลกอริทึมการรวม FlexBox คอนเทนเนอร์ FlexBox มีขนาดหลักเป็น 100dp โดยตั้งค่า wrap เป็น FlexWrap.Wrap และมีช่องว่าง 8dp ซึ่งมี 3 รายการที่มี basis 20dp, 40dp และ 50dp ตามลำดับ

มีพื้นที่ว่าง 100dp ในบรรทัด บุตรหลานคนที่ 1 อายุ 20dp ปี เนื่องจากมีพื้นที่ว่าง ระบบจึงวางบุตรหลานคนที่ 1 ไว้ในบรรทัด

มีพื้นที่ว่าง 80dp ในบรรทัด ช่องว่างคือ 8dp บุตรหลานคนที่ 2 อายุ 40dp ปี พื้นที่ที่จำเป็นคือ 48dp เนื่องจากมีพื้นที่ว่าง ช่องว่างและองค์ประกอบย่อย 2 จึงถูกจัดวางในบรรทัด

มีพื้นที่ว่าง 32dp ในบรรทัด ช่องว่างคือ 8dp บุตรหลานคนที่ 3 อายุ 50dp ปี พื้นที่ที่จำเป็นคือ 58dp บรรทัดปัจจุบันมีพื้นที่ไม่เพียงพอ ระบบจึงวางองค์ประกอบย่อย 3 ไว้ในบรรทัดใหม่

เพิ่มช่องว่างระหว่างรายการ

เพิ่มช่องว่างระหว่างแถวและคอลัมน์โดยใช้ rowGap และ columnGap ซึ่งมีประโยชน์ในการหลีกเลี่ยงการเพิ่มตัวแก้ไขระยะห่างจากขอบให้กับองค์ประกอบย่อย

rowGap เพิ่มระยะห่างแนวตั้งระหว่างรายการและบรรทัด	columnGap เพิ่มระยะห่างแนวนอนระหว่างรายการและบรรทัด	gap เป็นฟังก์ชันแสนสะดวกที่เพิ่มทั้ง columnGap และ rowGap