ป้าย

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

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

พื้นผิว API

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

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

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

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

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

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

  • 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 ควบคุมลักษณะที่ปรากฏ ของป้าย
  • Composables ของ Text สำหรับช่องเนื้อหาของ Badge จะปรากฏภายใน ป้าย ในกรณีนี้ จะแสดงจํานวนสินค้าในรถเข็น

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

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

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