این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

نشان‌ها

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

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

مثالی متفاوت از کامپوننت نشان. — **شکل ۱.** نمونه‌های نشان

سطح 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 عمل می‌کند. این آیکونی است که نشان روی آن ظاهر می‌شود. در این مورد، این یک آیکون ایمیل است.

اینگونه ظاهر می‌شود:

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

مثال تفصیلی

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

}

@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") } } class="devsite-github-link nocode no-select">Badges.kt

این مثال یک آیکون سبد خرید به همراه یک نشان که تعداد اقلام موجود در سبد خرید کاربر را نمایش می‌دهد، پیاده‌سازی می‌کند.

BadgedBox فقط زمانی نمایش داده می‌شود که تعداد آیتم‌ها از ۰ بیشتر باشد.
آرگومان‌های مربوط به containerColor و contentColor ظاهر نشان را کنترل می‌کنند.
Text قابل ترکیب برای جایگاه محتوای Badge درون نشان نمایش داده می‌شود. در این حالت، تعداد اقلام موجود در سبد خرید را نمایش می‌دهد.

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

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

منابع اضافی

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

سطح API

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 عمل می‌کند. این آیکونی است که نشان روی آن ظاهر می‌شود. در این مورد، این یک آیکون ایمیل است.

اینگونه ظاهر می‌شود:

مثال تفصیلی

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

@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")
        }
    }
}Badges.kt

BadgedBox فقط زمانی نمایش داده می‌شود که تعداد آیتم‌ها از ۰ بیشتر باشد.
آرگومان‌های مربوط به containerColor و contentColor ظاهر نشان را کنترل می‌کنند.
Text قابل ترکیب برای جایگاه محتوای Badge درون نشان نمایش داده می‌شود. در این حالت، تعداد اقلام موجود در سبد خرید را نمایش می‌دهد.

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

نشان‌ها با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

سطح API

مثال پایه

مثال تفصیلی

منابع اضافی

سطح API

مثال پایه

مثال تفصیلی

منابع اضافی

نشان‌ها