تراشه

جزء Chip یک عنصر رابط کاربری فشرده و تعاملی است. این موجودات پیچیده مانند یک مخاطب یا برچسب، اغلب با یک نماد و برچسب را نشان می دهد. می تواند قابل بررسی، رد کردن یا کلیک کردن باشد.

چهار نوع تراشه و محل استفاده از آنها به شرح زیر است:

• Assist : کاربر را در طول یک کار راهنمایی می کند. اغلب به عنوان یک عنصر رابط کاربری موقت در پاسخ به ورودی کاربر ظاهر می شود.
• فیلتر : به کاربران امکان می دهد محتوا را از مجموعه ای از گزینه ها اصلاح کنند. آنها را می توان انتخاب کرد یا از حالت انتخاب خارج کرد، و ممکن است هنگام انتخاب یک نماد علامت چک داشته باشند.
• ورودی : اطلاعات ارائه شده توسط کاربر، مانند انتخاب های موجود در یک منو را نشان می دهد. آنها می توانند شامل یک نماد و متن باشند و یک X برای حذف ارائه دهند.
• پیشنهاد : توصیه هایی را بر اساس فعالیت یا ورودی اخیر به کاربر ارائه می دهد. معمولاً در زیر یک فیلد ورودی ظاهر می‌شود تا اقدامات کاربر را درخواست کند.

سطح API

چهار نوع ترکیب وجود دارد که با چهار نوع تراشه مطابقت دارد. بخش‌های بعدی این ترکیب‌پذیرها و تفاوت‌های آن‌ها را با جزئیات شرح می‌دهند. با این حال، آنها پارامترهای زیر را به اشتراک می گذارند:

• label : رشته ای که روی تراشه ظاهر می شود.
• icon : نمادی که در ابتدای تراشه نمایش داده می شود. برخی از composable های خاص دارای پارامتر leadingIcon و trailingIcon جداگانه هستند.
• onClick : لامبدای که تراشه وقتی کاربر آن را فشار می‌دهد آن را صدا می‌زند.

تراشه کمکی

AssistChip composable یک راه ساده برای ایجاد یک تراشه کمکی ارائه می دهد که کاربر را به یک جهت خاص هدایت می کند. یکی از ویژگی های متمایز، پارامتر leadingIcon آن است که به شما امکان می دهد یک نماد را در سمت چپ تراشه نمایش دهید. مثال زیر نشان می دهد که چگونه می توانید آن را پیاده سازی کنید:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

این پیاده سازی به صورت زیر ظاهر می شود.

تراشه فیلتر

قابلیت Composable FilterChip از شما می‌خواهد ردیابی کنید که آیا تراشه انتخاب شده است یا خیر. مثال زیر نشان می‌دهد که چگونه می‌توانید تنها زمانی که کاربر تراشه را انتخاب کرده باشد، یک نماد علامت‌دار اصلی را نشان دهید:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

این پیاده سازی در صورت عدم انتخاب به صورت زیر ظاهر می شود:

و هنگام انتخاب به صورت زیر ظاهر می شود:

تراشه ورودی

شما می توانید از InputChip composable برای ایجاد تراشه هایی که از تعامل کاربر ایجاد می شود استفاده کنید. به عنوان مثال، در یک سرویس گیرنده ایمیل، زمانی که کاربر در حال نوشتن ایمیل است، یک تراشه ورودی ممکن است نمایانگر مخاطبی باشد که کاربر به فیلد "To:" اضافه کرده است.

پیاده سازی زیر یک تراشه ورودی را نشان می دهد که در حال حاضر در یک حالت انتخاب شده است. هنگامی که کاربر تراشه را فشار می دهد، آن را حذف می کند.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

این پیاده سازی به صورت زیر ظاهر می شود.

تراشه پیشنهاد

ترکیب‌پذیر SuggestionChip اساسی‌ترین ترکیب‌پذیر فهرست‌شده در این صفحه است، هم در تعریف API و هم در موارد استفاده رایج آن. تراشه‌های پیشنهاد نکاتی را ارائه می‌دهند که به صورت پویا تولید می‌شوند. به عنوان مثال، در یک برنامه چت هوش مصنوعی، ممکن است از تراشه‌های پیشنهاد برای ارائه پاسخ‌های احتمالی به جدیدترین پیام استفاده کنید.

این اجرای SuggestionChip را در نظر بگیرید:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

این پیاده سازی به صورت زیر ظاهر می شود:

تراشه بالا

همه نمونه‌های موجود در این سند از ترکیب‌های پایه استفاده می‌کنند که ظاهری مسطح دارند. اگر تراشه ای می خواهید که ظاهری برجسته داشته باشد، از یکی از سه ترکیب زیر استفاده کنید:

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

منابع اضافی

• اسناد رابط کاربری مواد