ป้าย

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

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

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

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

ลักษณะที่ปรากฏมีดังนี้

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

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

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

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(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 จะปรากฏภายในป้าย ในกรณีนี้ ระบบจะแสดงจํานวนสินค้าในรถเข็น

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

การใช้ป้ายที่มีจำนวนสินค้าในรถเข็นช็อปปิ้ง
รูปที่ 3 ป้ายที่แสดงจํานวนสินค้าในรถเข็นช็อปปิ้ง

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