تراشه‌های عنوان در Jetpack Compose Glimmer

دستگاه‌های XR قابل اجرا
این راهنما به شما کمک می‌کند تا برای این نوع دستگاه‌های XR تجربه ایجاد کنید.
عینک نمایش

در Jetpack Compose Glimmer، کامپوننت TitleChip یک کامپوننت غیرتعاملی است که زمینه یا برچسب مختصری برای محتوای مرتبط، مانند یک Card یا یک VerticalList ارائه می‌دهد.

از برچسب‌های عنوان برای اطلاعات مختصر مانند عنوان کوتاه، نام دسته یا نشانگر وضعیت استفاده کنید. معمولاً باید برچسب‌های عنوان را بالای محتوایی که توصیف می‌کنند قرار دهید تا یک رابطه ساختاری واضح برقرار شود.

شکل 1. نمونه‌ای از یک چیپ عنوان با سبک پیش‌فرض و چیپ عنوان چسبنده در Jetpack Compose Glimmer. هر چیپ عنوان دارای یک برچسب (1) و یک آیکون یا موجودیت پیشرو اختیاری (2) است.

مثال پایه: یک چیپ عنوان کوتاه ایجاد کنید

کد زیر یک چیپ عنوان پایه ایجاد می‌کند:

@Composable
fun TitleChipSample() {
    TitleChip { Text("Messages") }
}

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))
        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

نکات کلیدی در مورد کد

  • تراشه عنوان به صورت افقی در مرکز قرار گرفته است، که این چیدمان معمول برای تراشه عنوانی است که بالای کارت قرار می‌گیرد.
  • Spacer ارتفاع ثابتی دارد تا مقدار مناسب فاصله عمودی بین دو مؤلفه را فراهم کند. این با استفاده از TitleChipDefaults.associatedContentSpacing تعریف می‌شود.
  • از یک leadingIcon اختیاری برای اضافه کردن زمینه بصری اضافی قبل از محتوای متن استفاده می‌کند.
  • تراشه عنوان به طور خودکار از سبک caption برای متن خود استفاده می‌کند.
  • تراشه عنوان تعاملی نیست. اگر به یک برچسب قابل کلیک نیاز دارید، از یک Button یا یک جزء تعاملی دیگر استفاده کنید.