เริ่มต้นใช้งาน FlexBox

หน้านี้จะอธิบายวิธีใช้เลย์เอาต์ FlexBox เบื้องต้น

ตั้งค่าโปรเจ็กต์

1. เพิ่มไลบรารี androidx.compose.foundation.layout ลงใน lib.versions.toml ของโปรเจ็กต์

   [versions]
   compose = "1.12.0-alpha01"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. เพิ่มทรัพยากร Dependency ของไลบรารีลงใน build.gradle.kts ของแอป

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

สร้างเลย์เอาต์ FlexBox เบื้องต้น

ตัวอย่างที่ 1: FlexBox จัดวางองค์ประกอบ Text 2 รายการที่จัดกึ่งกลาง

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

ตัวอย่างที่ 2: FlexBox ขึ้นบรรทัดใหม่ 5 รายการเป็น 2 แถวและขยายรายการเหล่านั้นไม่เท่ากัน เพื่อเติมพื้นที่ว่างในแต่ละแถว โดยมีช่องว่าง 8.dp ทั้งแนวตั้งและแนวนอนระหว่างรายการ

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    // All boxes have an intrinsic width of 100.dp
    // Some grow to fill any remaining space on the row.
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    PinkRoundedBox(modifier = Modifier.flex { grow(1.0f) })
}
FlexBoxSnippets.kt

ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะการทำงานของ FlexBox ได้ที่ ตั้งค่าลักษณะการทำงานของคอนเทนเนอร์ และ ตั้งค่า ลักษณะการทำงานของรายการ