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

دستگاه‌های XR قابل‌اعمال

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

آشنایی با انواع دستگاه‌های XR →

آشنایی با انواع دستگاه‌های XR →

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

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

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

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

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

مثال پایه: ایجاد تراشه عنوان با نماد

کد زیر یک تراشه عنوان با نماد ایجاد می‌کند:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}
TitleChipSample.kt

مثال: ایجاد تراشه عنوان با کارت

برای استفاده از تراشه عنوان با عنصری دیگر، تراشه عنوان را TitleChipDefaults.associatedContentSpacing بالای عنصر دیگر در عنصر قابل ترکیب قرار دهید. کد زیر تراشه عنوان را با کارت ایجاد می‌کند:

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

نکات کلیدی درباره کد

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