دکمه‌های تغییر وضعیت در Jetpack Compose Glimmer

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

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

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

درباره انواع دستگاه‌های XR اطلاعات کسب کنید →

در Jetpack Compose Glimmer، یک ToggleButton یک کامپوننت تعاملی است که ظاهر خود را بر اساس حالت تیک خورده تغییر می‌دهد. دکمه‌های Toggle برای عینک‌های نمایش بهینه شده‌اند تا انتقال‌های بصری واضحی را در شکل و رنگ ارائه دهند. این انتقال‌ها نشان می‌دهند که چه زمانی یک عمل یا تنظیم فعال است.

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

برای موارد استفاده دیگر، دکمه‌های استاندارد و دکمه‌های آیکون نیز وجود دارد.

آناتومی

یک دکمه‌ی تغییر وضعیت شامل یک ظرف است که بین حالت‌ها تغییر شکل می‌دهد و یک برچسب با آیکون‌های اختیاری.

اندازه‌ها

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

تغییر تنظیمات پیش‌فرض دکمه‌ها

به طور پیش‌فرض، دکمه‌های تغییر وضعیت ToggleButtonDefaults.animateShape استفاده می‌کنند. این کار یک انتقال روان بین حالت‌های زیر ایجاد می‌کند:

• علامت نخورده : GlimmerTheme.shapes.large (معمولاً یک CircleShape ).
• علامت زده شده : ToggleButtonDefaults.CheckedShape (یک RoundedCornerShape با گوشه‌های 20.dp ).

کلاس ToggleButtonColors وضوح رنگ را برای حالت‌های زیر مدیریت می‌کند:

• علامت نخورده : پیش‌فرض روی GlimmerTheme.colors.surface است.
• علامت زده شده : پیش‌فرض روی GlimmerTheme.colors.surface است.

انیمیشن

دکمه‌های تغییر وضعیت از پیش‌فرض‌های زیر برای انیمیشن استفاده می‌کنند:

• animateShape : Shape را ارائه می‌دهد که اندازه گوشه‌ها را با استفاده از مشخصات انیمیشن فنر ( stiffness = 600f ) درون‌یابی می‌کند.
• colors : یک تابع factory برای سفارشی‌سازی رنگ‌های پس‌زمینه و محتوا برای هر دو حالت.
• CheckedShape : یک RoundedCornerShape(20.dp) که برای حالت بررسی شده استفاده می‌شود.
• contentPadding : از ButtonDefaults.contentPadding ارث‌بری می‌کند.

مثال: دکمه تغییر وضعیت

کد زیر یک دکمه‌ی تغییر وضعیت ساده ایجاد می‌کند:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}
ToggleButtonSamples.kt

مثال: دکمه‌ی تغییر وضعیت با آیکون پیشرو

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

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt