ป้าย

ใช้ป้ายเพื่อแสดงองค์ประกอบภาพขนาดเล็กเพื่อระบุสถานะ หรือค่าตัวเลขในคอมโพสได้อื่นๆ ตัวอย่างสถานการณ์ที่พบบ่อยที่คุณอาจใช้ป้ายมีดังนี้

การแจ้งเตือน: แสดงจำนวนการแจ้งเตือนที่ยังไม่ได้อ่านในไอคอนแอป หรือกระดิ่งแจ้งเตือน
ข้อความ: ระบุข้อความใหม่หรือข้อความที่ยังไม่ได้อ่านภายในแอปพลิเคชันแชท
การอัปเดตสถานะ: แสดงสถานะของงาน เช่น "เสร็จสมบูรณ์" "อยู่ระหว่าง ดำเนินการ" หรือ "ล้มเหลว"
จำนวนในรถเข็น: แสดงจำนวนสินค้าในรถเข็นช็อปปิ้งของผู้ใช้
เนื้อหาใหม่: ไฮไลต์เนื้อหาหรือฟีเจอร์ใหม่ที่พร้อมให้บริการแก่ผู้ใช้

ตัวอย่างคอมโพเนนต์ป้ายต่างๆ — **รูปที่ 1** ตัวอย่างป้าย

แพลตฟอร์ม API

ใช้คอมโพสได้ BadgedBox เพื่อใช้ป้ายในแอปพลิเคชัน ซึ่งเป็นคอนเทนเนอร์ คุณควบคุมลักษณะที่ปรากฏของคอนเทนเนอร์ได้ด้วยพารามิเตอร์หลัก 2 รายการต่อไปนี้

content: เนื้อหาคอมโพสได้ที่ BadgedBox มี โดยปกติจะเป็น Icon
badge: คอมโพสได้ที่ปรากฏเป็นป้ายเหนือเนื้อหา โดยปกติจะเป็นคอมโพสได้ Badge โดยเฉพาะ

ตัวอย่างพื้นฐาน

ข้อมูลโค้ดต่อไปนี้แสดงการใช้งานพื้นฐานของ BadgedBox

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}Badges.kt

ตัวอย่างนี้แสดงป้ายที่ซ้อนทับคอมโพสได้ Icon ที่ระบุ โปรดสังเกตสิ่งต่อไปนี้ในโค้ด

BadgedBox ทำหน้าที่เป็นคอนเทนเนอร์โดยรวม
อาร์กิวเมนต์สำหรับพารามิเตอร์ badge ของ BadgedBox คือ Badge เนื่องจาก Badge ไม่มีอาร์กิวเมนต์ของตัวเอง แอปจึงแสดงป้ายเริ่มต้นซึ่งเป็นวงกลมสีแดงขนาดเล็ก
Icon ทำหน้าที่เป็นอาร์กิวเมนต์สำหรับพารามิเตอร์ content ของ BadgedBox ซึ่งเป็นไอคอนที่ป้ายปรากฏอยู่เหนือ ในกรณีนี้คือไอคอนอีเมล

ลักษณะที่ปรากฏ

ป้ายที่เรียบง่ายซึ่งไม่มีเนื้อหา — **รูปที่ 2** การใช้งานป้ายแบบมินิมอล

ตัวอย่างโดยละเอียด

ข้อมูลโค้ดต่อไปนี้แสดงวิธีแสดงค่าในป้ายที่ตอบสนองต่อการดำเนินการของผู้ใช้

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}Badges.kt

ตัวอย่างนี้ใช้ไอคอนรถเข็นช็อปปิ้งที่มีป้ายซึ่งแสดงจำนวนสินค้าในรถเข็นของผู้ใช้

BadgedBox จะแสดงก็ต่อเมื่อจำนวนสินค้ามากกว่า 0
อาร์กิวเมนต์สำหรับ containerColor และ contentColor จะควบคุมลักษณะที่ปรากฏของป้าย
คอมโพสได้ Text สำหรับช่องเนื้อหาของ Badge จะปรากฏภายใน ป้าย ในกรณีนี้จะแสดงจำนวนสินค้าในรถเข็น

การใช้งานนี้จะปรากฏดังนี้

ป้าย จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

แพลตฟอร์ม API

ตัวอย่างพื้นฐาน

ตัวอย่างโดยละเอียด

แหล่งข้อมูลเพิ่มเติม

ป้าย