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

دستگاه‌های XR قابل اجرا

این راهنما به شما کمک می‌کند تا برای این نوع دستگاه‌های 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 یا یک جزء تعاملی دیگر استفاده کنید.