نشان‌ها

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

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

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

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

  • content: محتوای قابل‌ترکیب که BadgedBox حاوی آن است. قیمت معمول: Icon.
  • ‫badge: Composable که به‌عنوان نشان روی محتوا ظاهر می‌شود. معمولاً 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 در داخل نشان ظاهر می‌شود. در این مورد، تعداد موارد موجود در سبد خرید را نمایش می‌دهد.

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

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

منابع بیشتر