Jetpack Compose 滑块

借助 [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.010.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),
  )
}
相关推荐
Wgllss10 天前
Kotlin+协程+FLow+Channel+Compose 实现一个直播多个弹幕效果
android·架构·android jetpack
_一条咸鱼_10 天前
Android Gson注解驱动的转换规则原理(9)
android·面试·android jetpack
_一条咸鱼_10 天前
Android Runtime大对象分配与处理流程原理深度剖析(59)
android·面试·android jetpack
Wgllss11 天前
Kotlin+协程+FLow+Channel,实现生产消费者模式3种案例
android·架构·android jetpack
Wgllss11 天前
6种Kotlin中单例模式写法,特点及应用场景指南
android·架构·android jetpack
_一条咸鱼_11 天前
Android Runtime内存分配与对象生命周期深度解析(57)
android·面试·android jetpack
webbin11 天前
Compose 两种 `derivedStateOf` 写法比较
android jetpack
_一条咸鱼_12 天前
Android Runtime并发标记与三色标记法实现原理(55)
android·面试·android jetpack
Wgllss14 天前
Kotlin + Flow 实现责任链模式的4种案例
android·架构·android jetpack
移动的小太阳14 天前
Jetpack Lifecycle 组件详解
android jetpack