اسلایدر

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

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

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

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

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

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

  • value: مقدار فعلی لغزنده.
  • onValueChange: یک lambda که هربار مقدار تغییر می‌کند فراخوانده می‌شود.
  • 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())
    }
}

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

یک مؤلفه لغزنده با مقداری که تقریباً در سه چهارم مسیر انتخاب شده است.
شکل ۲. پیاده‌سازی پایه لغزنده.

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

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

  • 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())
    }
}

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

لغزنده جداگانه با محدوده ۰ تا ۵۰ که پنج علامت تأیید را در فاصله‌های مساوی نشان می‌دهد. لغزنده نزدیک علامت تیک دوم قرار دارد که نشان‌دهنده مقدار انتخاب‌شده ۱۶ است.
شکل ۳.‏ لغزنده‌ای با پله‌ها و محدوده مقدار تنظیم‌شده.

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

همچنین می‌توانید از ترکیب‌پذیر اختصاصی 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())
    }
}

مؤلفه لغزنده گستره با دو مقدار انتخاب‌شده. برچسبی حدود بالا و پایین انتخاب را نمایش می‌دهد.
شکل ۴. پیاده‌سازی لغزنده محدوده.

منابع بیشتر