Jetpack Compose 滑块

IT乐手2024-03-29 16:55

借助 $`Slider`$ 可组合项，用户可以从一系列值中进行选择。您可以使用滑块来让用户执行以下操作：

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

该滑块包含滑道、滑块、值标签和刻度线：

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

基本实现方法

kotlin 复制代码

Text(text = sliderPosition.value.toString(), modifier = Modifier.padding(horizontal = 15.dp))
Slider(
    value = sliderPosition.floatValue,
    onValueChange = { sliderPosition.floatValue = it },
    modifier = Modifier.padding(horizontal = 15.dp)
)

高级实现

实现更复杂的滑块时，您还可以利用以下参数。

colors ：用于控制滑块颜色的 SliderColors 实例。
valueRange：滑块可采用的值的范围。
steps：滑块上拇指扣合的凹槽数量。

以下代码段会实现一个包含 9 个步骤的滑块，范围为 0.0 到 10.0。由于滑块会贴靠到每一步，因此此滑块是离散的。

kotlin 复制代码

val sliderPosition = remember { mutableFloatStateOf(0f) }
Column {
    Text(text = sliderPosition.value.roundToInt().toString(), modifier = Modifier.padding(horizontal = 15.dp))
    Slider(
      value = sliderPosition.floatValue,
      onValueChange = { sliderPosition.floatValue = it },
      modifier = Modifier.padding(horizontal = 15.dp),
      steps = 9,
      valueRange = 0f..10f
    )
}

范围滑块

kotlin 复制代码

val sliderPosition = remember { mutableStateOf(0f..100f) }
Column {
  Text(text = sliderPosition.toString(),modifier = Modifier.padding(horizontal = 15.dp))
  RangeSlider(
      value = sliderPosition.value,
      steps = 5,
      onValueChange = { range -> sliderPosition.value = range },
      valueRange = 0f..100f,
      onValueChangeFinished = {
          // launch some business logic update with the state you hold
          // viewModel.updateSelectedSliderValue(sliderPosition)
      },
      modifier = Modifier.padding(horizontal = 15.dp),
  )
}