تعویض

مولفه Switch به کاربران اجازه می دهد تا بین دو حالت جابجا شوند: علامت زده و بدون علامت. در برنامه خود می توانید از یک سوئیچ استفاده کنید تا به کاربر اجازه دهید یکی از موارد زیر را انجام دهد:

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

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

شکل 1. جزء سوئیچ.

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

برای تعریف کامل API به مرجع Switch مراجعه کنید. برخی از پارامترهای کلیدی که ممکن است نیاز به استفاده از آنها داشته باشید به شرح زیر است:

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

مثال زیر اجرای حداقلی از Switch composable است.

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

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

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

شکل 2. یک سوئیچ بدون علامت.

این ظاهر هنگام بررسی است:

شکل 3. یک سوئیچ چک شده.

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

پارامترهای اولیه ای که ممکن است بخواهید هنگام اجرای سوئیچ پیشرفته تر استفاده کنید به شرح زیر است:

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

انگشت شست سفارشی

شما می توانید هر composable را برای پارامتر 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

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

شکل 4. یک سوئیچ با نماد علامت گذاری شده سفارشی.

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

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

@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

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

شکل 5. یک سوئیچ با رنگ های سفارشی.

منابع اضافی

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