نشان‌ها

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

  • اعلان‌ها: تعداد اعلان‌های خوانده‌نشده را روی نماد برنامه یا زنگ اعلان نمایش می‌دهد.
  • پیام‌ها: پیام‌های جدید یا خوانده‌نشده را در برنامه گپ نشان می‌دهد.
  • به‌روزرسانی‌های وضعیت: وضعیت تکلیف را نشان می‌دهد، مثلاً «کامل»، «درحال انجام»، یا «ناموفق».
  • تعداد سبد خرید: تعداد محصولات موجود در سبد خرید کاربر را نمایش دهید.
  • محتوای جدید: محتوا یا ویژگی‌های جدید دردسترس کاربر را برجسته کنید.
نمونه‌های مختلف عنصر نشان.
شکل ۱. نمونه‌های نشان

سطح میانای برنامه‌سازی کاربردی

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

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

مثال پایه

این تکه‌کد پیاده‌سازی پایه BadgedBox را نشان می‌دهد:

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

این مثال نشان متمایزی را نمایش می‌دهد که روی Icon قابل‌ساخت ارائه‌شده هم‌پوشانی دارد. موارد زیر را در کد یادداشت کنید:

  • BadgedBox به‌عنوان ظرف کلی عمل می‌کند.
  • متغیر مستقل برای پارامتر badge در BadgedBox Badge است. چون Badge هیچ آرگومان خاصی ندارد، برنامه نشان پیش‌فرض را که دایره‌ای قرمز کوچک است نمایش می‌دهد.
  • ‫Icon به‌عنوان آرگومان پارامتر content در BadgedBox عمل می‌کند. این نمادی است که نشان روی آن ظاهر می‌شود. در این مورد، نماد ایمیل است.

به این صورت نشان داده می‌شود:

نشان ساده‌ای که محتوایی ندارد.
شکل ۲. پیاده‌سازی نشان حداقلی.

مثال مفصل

تکه کد زیر نشان می‌دهد که چگونه می‌توانید مقادیر را در نشان که به کنش‌های کاربر پاسخ می‌دهد نمایش دهید.

@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 فقط زمانی نمایش داده می‌شود که تعداد موارد بیشتر از ۰ باشد.
  • متغیرهای مستقل containerColor و contentColor ظاهر نشان را کنترل می‌کنند.
  • عنصر ترکیبی Text برای جای آگهی محتوای Badge در نشان ظاهر می‌شود. در این مورد، تعداد محصولات موجود در سبد خرید را نشان می‌دهد.

این پیاده‌سازی به‌صورت زیر نشان داده می‌شود:

پیاده‌سازی نشان که شامل تعداد محصولات در سبد خرید است.
شکل ۳. نشان‌واره‌ای که تعداد محصولات موجود در سبد خرید را نمایش می‌دهد.

منابع بیشتر