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

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

รายการแรกที่วางในคอนเทนเนอร์ FlexBox — **รูปที่ 1** รายการแรกวางอยู่ในคอนเทนเนอร์ `FlexBox`

มีพื้นที่ว่าง 80dp ในบรรทัด ช่องว่างมีขนาด 8dp รายการย่อย 2 มีขนาด 40dp พื้นที่ที่ต้องใช้คือ 48dp มีพื้นที่ว่าง ช่องว่างและรายการย่อย 2 จึงถูกวางไว้ในบรรทัด

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

รายการที่ 3 วางในบรรทัดใหม่เนื่องจากไม่พอดีกับบรรทัดแรก — **รูปที่ 3** รายการที่ 3 วางอยู่ในบรรทัดใหม่เนื่องจากไม่พอดีกับบรรทัดแรก

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

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

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

ช่องว่างของคอลัมน์จะเพิ่มพื้นที่แนวนอนระหว่างรายการ

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

rowGap

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

columnGap

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

gap เป็นฟังก์ชันแสนสะดวกที่เพิ่มทั้ง columnGap และ rowGap

เริ่มใช้งาน

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