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

หากต้องการกำหนดค่าลักษณะการทำงานของคอนเทนเนอร์ 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 มีช่องว่าง ดังนั้นจึงวางช่องว่างและ Child 2 ไว้ในบรรทัด

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

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

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

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