ป้าย

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

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

แพลตฟอร์ม API

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

  • content: เนื้อหาที่เขียนได้ซึ่งมี BadgedBox ราคาปกติ Icon
  • badge: Composable ซึ่งปรากฏเป็นป้ายบนเนื้อหา โดยทั่วไปจะใช้ 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 Composable สำหรับช่องเนื้อหาของ Badge จะปรากฏภายใน ป้าย ในกรณีนี้ก็จะแสดงจำนวนสินค้าในรถเข็น

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

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

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