لغزنده

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

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

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

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

شکل 1. اجرای یک نوار لغزنده.

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

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

• 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

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

شکل 2. اجرای اساسی یک نوار لغزنده.

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

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

• 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

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

شکل 3. یک نوار لغزنده با مراحل و محدوده مقدار تنظیم شده.

توجه: ابتدا و انتهای یک نوار لغزنده به عنوان "گام" محاسبه می شود. در مثال قبلی که محدوده 0f..50f و تعداد steps 3 است، هر بازه در طول محدوده 12.5 است زیرا ابتدا و انتهای نوار لغزنده نیز فواصل زمانی هستند که کاربر می تواند انتخاب کند.

توجه: همچنین می‌توانید برای شخصی‌سازی کامل‌تر ظاهر مؤلفه، یک thumb و track قابل تنظیم را به Slider ارسال کنید.

لغزنده برد

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

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

@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

شکل 4. اجرای یک نوار لغزنده محدوده.

منابع اضافی

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