نشان‌ها

از یک نشان برای نمایش یک عنصر بصری کوچک برای نشان دادن وضعیت یا یک مقدار عددی در قابل ترکیب دیگر استفاده کنید. در اینجا چند سناریو رایج وجود دارد که در آن ممکن است از نشان استفاده کنید:

  • اعلان‌ها : تعداد اعلان‌های خوانده نشده را روی نماد برنامه یا زنگ اعلان نمایش دهید.
  • پیام ها : پیام های جدید یا خوانده نشده را در یک برنامه چت نشان می دهد.
  • به‌روزرسانی‌های وضعیت : وضعیت یک کار مانند "تکمیل"، "در حال انجام" یا "شکست خورده" را نشان می‌دهد.
  • مقدار سبد خرید : نمایش تعداد اقلام در سبد خرید کاربر.
  • محتوای جدید : محتوا یا ویژگی های جدید در دسترس کاربر را برجسته کنید.
نمونه متفاوتی از مولفه نشان.
شکل 1. نمونه های نشان

سطح API

از BadgedBox composable برای پیاده سازی نشان ها در برنامه خود استفاده کنید. در نهایت یک ظرف است. شما ظاهر آن را با این دو پارامتر اصلی کنترل می کنید:

  • content : محتوای قابل ترکیبی که BadgedBox حاوی آن است. به طور معمول Icon .
  • badge : قابل ترکیب که به عنوان نشان روی محتوا ظاهر می شود. معمولاً Badge اختصاصی قابل ساخت.

مثال اساسی

این قطعه کد یک پیاده سازی اساسی از BadgedBox را نشان می دهد:

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

این مثال نشانی را نشان می‌دهد که روی 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. نشانی که تعداد اقلام موجود در سبد خرید را نشان می دهد.

منابع اضافی