دکمه‌های مبدل در Jetpack Compose Glimmer

دستگاه‌های XR قابل‌اعمال

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

آشنایی با انواع دستگاه‌های XR →

آشنایی با انواع دستگاه‌های XR →

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

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

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

تشریح

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

اندازه

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

پیش‌فرض‌های دکمه مبدل

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

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

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

• علامت‌گذاری‌نشده: پیش‌فرض روی GlimmerTheme.colors.surface تنظیم می‌شود.
• علامت‌گذاری‌شده: به‌طور پیش‌فرض روی GlimmerTheme.colors.surface تنظیم می‌شود.

پویانمایی

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

• ‫animateShape: Shape را ارائه می‌دهد که اندازه‌های گوشه را بااستفاده از مشخصات پویانمایی فنری (stiffness = 600f) درون‌یابی می‌کند.
• colors: تابع کارخانه‌ای برای سفارشی‌سازی رنگ‌های پس‌زمینه و محتوا برای هر دو حالت.
• 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) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt