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

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

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

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

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

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

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

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

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

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

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

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

برای استفاده از تراشه عنوان با مؤلفه‌ای دیگر، تراشه عنوان را 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")
        }
    }
}

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

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