android compose Slider 滑块 使用

android compose Slider 滑块 使用

lider 可组合项可让用户从一系列 值中进行选择。您可以使用滑块让用户执行以下操作：

• 调整使用一系列值的设置，例如音量和亮度。
• 过滤图表中的数据，例如设置价格范围时。
• 用户输入，例如在评价中设置评分。

滑块包含轨道、滑块手柄、值标签和刻度线：

• 轨道：轨道是水平条，表示滑块可以采用的 值范围。
• 滑块手柄：滑块手柄是滑块上的可拖动控制元素，用户可以通过它在轨道定义的范围内选择特定值。
• 刻度线：刻度线是可选的视觉标记或指示器， 显示在滑块的轨道上。

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RangeSlider
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/28 13:08
 * Description :  滑块
 */
class SliderActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    SliderDemo()
                }
            }
        }
    }

    @Preview
    @Composable
    fun SliderDemo(){
        Column(
            Modifier.padding(start = 20.dp, end = 20.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(Modifier.height(20.dp))
            Text(text = "Slider 滑块使用", color = Color.Red, fontSize = 30.sp)
            Spacer(Modifier.height(20.dp))
            Text(text = "Slider 滑块")
            SliderMinimalExample()
            Spacer(Modifier.height(20.dp))
            Text(text = "Slider 高级实现")
            SliderAdvancedExample()
            Spacer(Modifier.height(20.dp))
            Text(text = "Slider 范围滑块")
            RangeSliderExample()
        }
    }

    @Preview
    @Composable
    fun SliderMinimalExample(){
        var sliderPosition by remember { mutableFloatStateOf(0f) }

        Column() {
            Slider(
                value = sliderPosition,
                onValueChange = {sliderPosition = it}
            )
            Text(
                text = sliderPosition.toString()
            )
        }
    }

    /**
     * 包含三个步长的滑块，范围 从 0.0 到 100.0
     * 100 除以 3 ， 每次滑动3.33左右
     */
    @Preview
    @Composable
    fun SliderAdvancedExample(){
        var sliderPosition by remember { mutableFloatStateOf(0f) }

        Column() {
            Slider(
                value = sliderPosition,
                onValueChange = {sliderPosition = it},
                colors = SliderDefaults.colors(
                    thumbColor = MaterialTheme.colorScheme.secondary,
                    activeTickColor = MaterialTheme.colorScheme.secondary,
                    inactiveTickColor = MaterialTheme.colorScheme.secondaryContainer
                ),
                steps = 30,
                valueRange = 0f..100f
            )

            Text(text = sliderPosition.toString())
        }
    }

    @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 = {

                }
            )
            Text(text = sliderPosition.toString())
        }
    }
}