اسلایدر

ترکیب‌پذیر Slider به کاربران امکان می‌دهد از میان مجموعه‌ای از مقادیر انتخاب کنند. می‌توانید از لغزنده برای انجام کارهای زیر توسط کاربر استفاده کنید:

• تنظیماتی را که از محدوده مقادیر استفاده می‌کنند، مانند میزان صدا و روشنایی، تنظیم کنید.
• فیلتر کردن داده‌ها در نمودار، مانند زمانی که محدوده قیمت را تنظیم می‌کنید.
• ورودی کاربر، مانند تنظیم رده‌بندی در مرور.

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

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

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

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

• value: مقدار فعلی لغزنده.
• onValueChange: لامبدایی که هر بار مقدار تغییر می‌کند فراخوانی می‌شود.
• enabled: مقدار بولی که نشان می‌دهد آیا کاربر می‌تواند با لغزنده تعامل داشته باشد یا نه.

مثال زیر لغزنده ساده‌ای است. به کاربر اجازه می‌دهد مقداری را از 0.0 تا 1.0 انتخاب کند. چون کاربر می‌تواند هر مقداری را در آن محدوده انتخاب کند، لغزنده پیوسته است.

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

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

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

هنگام پیاده‌سازی لغزنده پیچیده‌تر، می‌توانید علاوه‌بر این از پارامترهای زیر استفاده کنید.

• colors: نمونه‌ای از SliderColors که به شما امکان می‌دهد رنگ‌های لغزنده را کنترل کنید.
• valueRange: محدوده مقادیری که لغزنده می‌تواند داشته باشد.
• steps: تعداد شکاف‌های لغزنده که شست به آن‌ها می‌چسبد.

گزیده زیر لغزنده‌ای را پیاده‌سازی می‌کند که سه مرحله دارد و محدوده آن از 0.0 تا 50.0 است. چون انگشت شست به هر مرحله می‌چسبد، این لغزنده گسسته است.

@Preview
@Composable
fun SliderAdvancedExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colorScheme.secondary,
                activeTrackColor = MaterialTheme.colorScheme.secondary,
                inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
            ),
            steps = 3,
            valueRange = 0f..50f
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

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

لغزنده محدوده

همچنین می‌توانید از عنصر ترکیبی RangeSlider اختصاصی استفاده کنید. این کار به کاربر امکان می‌دهد دو مقدار را انتخاب کند. این کار می‌تواند در مواردی مثل زمانی که کاربر می‌خواهد حداقل و حداکثر قیمت را انتخاب کند مفید باشد.

مثال زیر نمونه نسبتاً ساده‌ای از لغزنده محدوده پیوسته است.

@Preview
@Composable
fun RangeSliderExample() {
    var sliderPosition by remember { mutableStateOf(0f..100f) }
    Column {
        RangeSlider(
            value = sliderPosition,
            steps = 5,
            onValueChange = { range -> sliderPosition = range },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

منابع بیشتر

• اسناد Material UI