ป้าย

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

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

แพลตฟอร์ม API

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

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

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

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

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

ตัวอย่างนี้แสดงป้ายที่วางซ้อนทับ Composable 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")
        }
    }
}

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

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

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

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

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