Box ใน Jetpack Compose: คืออะไร คุณสมบัติ composable และวิธีการทำงาน

Box ใน Jetpack Compose คืออะไร?

Box เป็นฟังก์ชัน composable ที่วางองค์ประกอบย่อยในพื้นที่เดียวกัน โดยซ้อนกันทับ องค์ประกอบย่อยแรกจะถูกวาดไว้ด้านล่าง สุดท้ายอยู่ด้านบน โดยค่าเริ่มต้น Box จะปรับตามขนาดขององค์ประกอบย่อยที่ใหญ่ที่สุด

แตกต่างจาก Row และ Column ตรงที่ Box ไม่ได้จัดเรียงองค์ประกอบตามลำดับ — องค์ประกอบย่อยทั้งหมดใช้พื้นที่เดียวกันและสามารถทับซ้อนกันได้ สิ่งนี้ทำให้ Box ขาดไม่ได้ในการประกอบเลเยอร์อินเทอร์เฟซ

ขนาดของ Box ถูกกำหนดโดยกฎ: หากไม่มีองค์ประกอบย่อยใดมีขนาดคงที่ Box จะยุบลงเป็นขนาดต่ำสุด หากมีองค์ประกอบย่อยอย่างน้อยหนึ่งตัวมี Modifier.fillMaxSize Box จะขยายจนถึงขนาดสูงสุด

ตาม Android Developers Blog, 2024 Box เป็นคอนเทนเนอร์ที่มีประสิทธิภาพมากที่สุดใน Compose สำหรับกรณีที่องค์ประกอบไม่ต้องการการจัดเรียงตามลำดับ Box ไม่ทำการวัดเพิ่มเติมสำหรับการวางตำแหน่ง แตกต่างจาก Row และ Column

ลายเซ็นพื้นฐานของ Box

Box รับพารามิเตอร์ modifier, contentAlignment และ propagateMinConstraints องค์ประกอบย่อยทั้งหมดถูกส่งในบล็อก content โดยแต่ละตัวสามารถมีตัวปรับเปลี่ยนของตัวเองได้

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Blue)
        )
        Text(
            text = "สวัสดี",
            color = Color.White
        )
    }
}

ContentAlignment และ Modifier.align ใน Box

contentAlignment เป็นพารามิเตอร์ของ Box ที่กำหนดการจัดตำแหน่งเริ่มต้นสำหรับองค์ประกอบย่อยทั้งหมด หากไม่ระบุ จะใช้ Alignment.TopStart — องค์ประกอบจะถูกวางไว้ที่มุมบนซ้ายของคอนเทนเนอร์

Modifier.align อนุญาตให้แทนที่การจัดตำแหน่งสำหรับองค์ประกอบย่อยเฉพาะโดยอิสระจาก contentAlignment ตัวอย่างเช่น Box ที่มี Alignment.Center สามารถมีองค์ประกอบที่มี Modifier.align(Alignment.BottomEnd) ซึ่งจะถูกตรึงไว้ที่มุมล่างขวา

ตาม Material Design Guidelines, 2025 Modifier.align มีประโยชน์สำหรับการวางตำแหน่งป้ายและไอคอนบนภาพพื้นหลัง สิ่งนี้ช่วยให้ตั้งค่าการจัดตำแหน่งทั่วไปสำหรับเนื้อหาทั้งหมดของ Box และแทนที่สำหรับองค์ประกอบแต่ละรายการ

ตารางค่า Alignment

ตัวอย่างกับ Modifier.align

ในตัวอย่างนี้ Box มีภาพพื้นหลังและป้ายที่มุมล่างขวา Modifier.align(BottomEnd) วางตำแหน่งป้ายโดยอิสระจาก contentAlignment ของ Box

@Composable
fun BadgeExample() {
    Box(
        modifier = Modifier.size(120.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.size(100.dp).background(Color.Gray)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red, CircleShape)
        )
    }
}

การจัดการเลเยอร์ด้วย zIndex

Modifier.zIndex ควบคุมลำดับการวาดขององค์ประกอบภายใน Box โดยค่าเริ่มต้น องค์ประกอบจะถูกวาดตามลำดับการประกาศ — องค์ประกอบแรกอยู่ด้านล่าง สุดท้ายอยู่ด้านบน zIndex แทนที่ลำดับนี้

องค์ประกอบที่มี zIndex 2.0f จะถูกวาดเหนือองค์ประกอบที่มี zIndex 1.0f โดยไม่ขึ้นกับลำดับในโค้ด ค่า zIndex ที่เป็นลบจะวางองค์ประกอบไว้ใต้ตัวอื่น ตาม Android Developers, 2024 zIndex มีผลต่อลำดับการวาดเท่านั้น ไม่มีผลต่อการจัดการเหตุการณ์สัมผัส

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

@Composable
fun ZIndexExample() {
    Box(modifier = Modifier.size(150.dp)) {
        Box(modifier = Modifier.size(80.dp)
            .align(Alignment.TopStart)
            .zIndex(2.0f)
            .background(Color.Green))
        Box(modifier = Modifier.size(100.dp)
            .align(Alignment.Center)
            .zIndex(1.0f)
            .background(Color.Blue))
    }
}

ตัวอย่างการใช้งาน Box ที่ใช้งานได้จริง

Box ถูกใช้อย่างแพร่หลายในการวางข้อความทับรูปภาพ ภาพพื้นหลังจะถูกวางก่อน จากนั้นข้อความที่มี Modifier.align สำหรับวางตำแหน่งบนพื้นหลัง

@Composable
fun ImageWithOverlay() {
    Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
        Image(
            painter = painterResource(R.drawable.photo),
            contentDescription = "Photo",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier.fillMaxSize()
                .background(Color.Black.copy(alpha = 0.4f))
        )
        Text(
            text = "หัวข้อ",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

ตัวอย่างที่สองคือ Box สำหรับสร้างตัวบ่งชี้การโหลด Box ครอบคลุมพื้นที่หน้าจอทั้งหมด และ CircularProgressIndicator จะถูกจัดกึ่งกลางผ่าน contentAlignment

@Composable
fun LoadingOverlay() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(48.dp)
        )
    }
}

ข้อจำกัดขนาดของ Box

Box โดยค่าเริ่มต้นจะปรับตามขนาดของเนื้อหา หากองค์ประกอบย่อยมีขนาดต่างกัน Box จะใช้ขนาดขององค์ประกอบที่ใหญ่ที่สุด เมื่อไม่มีองค์ประกอบย่อย Box จะยุบลงเป็นขนาดต่ำสุด

Modifier.clipToBounds จำกัดการเรนเดอร์องค์ประกอบย่อยให้อยู่ภายในขอบเขตของ Box หากไม่มีตัวปรับเปลี่ยนนี้ องค์ประกอบย่อยสามารถขยายออกนอก Box ได้ ตาม Material Design Guidelines, 2025 clipToBounds เป็นสิ่งจำเป็นเมื่อใช้ Modifier.scale หรือ Modifier.graphicsLayer ภายใน Box

propagateMinConstraints เป็นพารามิเตอร์ของ Box ที่ส่งต่อข้อจำกัดขนาดต่ำสุดไปยังองค์ประกอบย่อย หากตั้งค่าเป็น true องค์ประกอบย่อยจะต้องไม่เล็กกว่าขนาดต่ำสุดที่กำหนดไว้สำหรับ Box ผ่าน Modifier.size หรือ Modifier.constrain

• Box — คอนเทนเนอร์ขั้นต่ำหากไม่มีการกำหนดขนาดและไม่มีองค์ประกอบย่อยที่มี fillMaxSize
• Modifier.clipToBounds ป้องกันเนื้อหาไหลออกนอกขอบเขต Box
• propagateMinConstraints ส่งต่อข้อจำกัดต่ำสุดไปยังองค์ประกอบย่อย