Android Jetpack Compose - Switch（切换）、Slider（滑块）、RangeSlider（范围滑块）

一、Switch（切换）

1、基本介绍

kotlin 复制代码

fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    thumbContent: (@Composable () -> Unit)? = null,
    enabled: Boolean = true,
    colors: SwitchColors = SwitchDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
) {}

参数	说明
checked	当前开关状态
onCheckedChange	状态变化时的回调
modifier	布局修饰符
thumbContent	自定义滑块内容
enabled	是否启用
colors	自定义颜色，通过 `SwitchDefaults.colors()` 配置
interactionSource	自定义交互状态反馈

2、演示

kotlin 复制代码

var checked by remember { mutableStateOf(true) }

Box(
    modifier = Modifier.fillMaxSize()
) {
    Switch(
        modifier = Modifier.align(Alignment.Center),
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

kotlin 复制代码

var checked by remember { mutableStateOf(true) }

Box(
    modifier = Modifier.fillMaxSize()
) {
    Switch(
        modifier = Modifier.align(Alignment.Center),
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}

kotlin 复制代码

var checked by remember { mutableStateOf(true) }

Box(
    modifier = Modifier.fillMaxSize()
) {
    Switch(
        modifier = Modifier.align(Alignment.Center),
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}

二、Slider（滑块）

1、基本介绍

kotlin 复制代码

fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    @IntRange(from = 0) steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
) {}

参数	说明
value	当前滑块的值
onValueChange	值变化时的回调
modifier	布局修饰符
enabled	是否启用
valueRange	值范围
steps	`steps = 0`（默认）：滑块在 valueRange 内连续滑动 `steps = 3`：将范围分成 4 个等距档位，`档位数 = steps + 1`
onValueChangeFinished	松开手指结束滑动时的回调
colors	自定义颜色，通过 `SliderDefaults.colors()` 配置
interactionSource	自定义交互状态反馈

2、演示

kotlin 复制代码

var sliderPosition by remember { mutableFloatStateOf(0f) }

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Slider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it }
    )
    Text(text = sliderPosition.toString())
}

kotlin 复制代码

var sliderPosition by remember { mutableFloatStateOf(0f) }

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    Slider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        colors = SliderDefaults.colors(
            thumbColor = MaterialTheme.colorScheme.secondary,
            activeTrackColor = MaterialTheme.colorScheme.secondary,
            inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        ),
        steps = 3,
    )
    Text(text = sliderPosition.toString())
}

kotlin 复制代码

var sliderPosition by remember { mutableFloatStateOf(0f) }

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    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（范围滑块）

1、基本介绍

kotlin 复制代码

fun RangeSlider(
    value: ClosedFloatingPointRange<Float>,
    onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    @IntRange(from = 0) steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors()
) {}

参数	说明
value	当前滑块的值
onValueChange	值变化时的回调
modifier	布局修饰符
enabled	是否启用
valueRange	值范围
steps	`steps = 0`（默认）：滑块在 valueRange 内连续滑动 `steps = 3`：将范围分成 4 个等距档位，`档位数 = steps + 1`
onValueChangeFinished	松开手指结束滑动时的回调
colors	自定义颜色，通过 `SliderDefaults.colors()` 配置

2、演示

kotlin 复制代码

var sliderPosition by remember { mutableStateOf(0f..100f) }

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    RangeSlider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        onValueChangeFinished = {
            Log.i(TAG, "松开手指结束滑动了")
        },
        valueRange = 0f..100f
    )
    Text(sliderPosition.start.toString() + " - " + sliderPosition.endInclusive.toString())
}

kotlin 复制代码

var sliderPosition by remember { mutableStateOf(0f..100f) }

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    RangeSlider(
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..100f,
        steps = 3,
    )
    Text(sliderPosition.start.toString() + " - " + sliderPosition.endInclusive.toString())
}