عوض کردن

مؤلفه 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(
                    painter = rememberVectorPainter(AppIcons.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