در Jetpack Compose Glimmer، مؤلفه TitleChip یک مؤلفه غیرتعاملی است که بافت یا برچسبگذاری مختصری برای محتوای مرتبط ارائه میدهد، مانند Card یا GlimmerLazyColumn.
از تراشههای عنوان برای اطلاعات مختصر مانند عنوان کوتاه، نام دسته، یا نشانگر وضعیت استفاده کنید. معمولاً باید تراشههای عنوان را بالای محتوایی که توصیف میکنند قرار دهید تا رابطه ساختاری واضحی ایجاد شود.
مثال پایه: ایجاد تراشه عنوان کوتاه
کد زیر یک تراشه عنوان پایه ایجاد میکند:
@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یا مؤلفه تعاملی دیگری استفاده کنید.