ป้าย

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

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

แพลตฟอร์ม API

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

  • content: เนื้อหาที่คอมโพสได้ซึ่ง BadgedBox มี โดยปกติแล้ว Icon
  • badge: คอมโพสิชันที่ปรากฏเป็นป้ายเหนือเนื้อหา โดยทั่วไปคือ Badge Composable โดยเฉพาะ

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

ข้อมูลโค้ดนี้แสดงการใช้งาน 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 ป้ายที่แสดงจํานวนสินค้าในรถเข็นช็อปปิ้ง

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