عوض کردن

عنصر Switch به کاربران امکان می‌دهد بین دو وضعیت جابه‌جا شوند: انتخاب‌شده و انتخاب‌نشده. در برنامه‌تان می‌توانید از کلیدی استفاده کنید که به کاربر اجازه دهد یکی از کارهای زیر را انجام دهد:

• تنظیمی را روشن یا خاموش کنید.
• ویژگی‌ای را فعال یا غیرفعال کنید.
• گزینه‌ای را انتخاب کنید.

این عنصر دو بخش دارد: شست و مسیر. شست قسمت کشیدنی کلید و مسیر پس‌زمینه است. کاربر می‌تواند شست خود را به‌سمت چپ یا راست بکشد تا وضعیت کلید را تغییر دهد. همچنین می‌توانند روی کلید بزنند تا آن را بررسی و پاک کنند.

پیاده‌سازی پایه

برای تعریف کامل «میانای برنامه‌سازی کاربردی»، به مرجع Switch مراجعه کنید. برخی‌از پارامترهای کلیدی که ممکن است لازم باشد استفاده کنید در زیر آمده است:

• checked: وضعیت اولیه کلید.
• onCheckedChange: یک تماس برگشتی که وقتی وضعیت کلید تغییر می‌کند فراخوانی می‌شود.
• enabled: اینکه کلید فعال یا غیرفعال است.
• colors: رنگ‌های استفاده‌شده برای کلید.

مثال زیر پیاده‌سازی حداقلی از عنصر ترکیبی Switch است.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

این پیاده‌سازی درصورت لغو انتخاب به این صورت نمایش داده می‌شود:

وقتی علامت زده می‌شود، این‌گونه نمایش داده می‌شود:

پیاده‌سازی پیشرفته

پارامترهای اصلی که ممکن است بخواهید هنگام پیاده‌سازی یک سوئیچ پیشرفته‌تر استفاده کنید، عبارت‌اند از:

• thumbContent: از این برای سفارشی‌سازی ظاهر شست هنگام انتخاب شدن استفاده کنید.
• colors: از این برای سفارشی‌سازی رنگ قطعه و انگشت شست استفاده کنید.

شست سفارشی

می‌توانید هر عنصر ترکیبی را برای پارامتر thumbContent ارسال کنید تا یک تصویر کوچک سفارشی ایجاد کنید. در زیر نمونه‌ای از کلیدی ارائه شده است که از نماد سفارشی برای انگشت شست خود استفاده می‌کند:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

در این پیاده‌سازی، ظاهر انتخاب‌نشده همانند مثال در بخش قبلی است. بااین‌حال، وقتی علامت‌گذاری شود، این پیاده‌سازی به‌صورت زیر نمایش داده می‌شود:

رنگ‌های سفارشی

مثال زیر نشان می‌دهد که چگونه می‌توانید از پارامتر colors برای تغییر رنگ شستی و مسیر کلید استفاده کنید و درنظر بگیرید که کلید انتخاب شده است یا نه.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

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

منابع بیشتر

• اسناد Material UI