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),
  )
}
相关推荐
柿蒂1 小时前
Android图片批量添加处理优化:从「30」秒缩短至「4.4」秒
android·android jetpack
alexhilton12 小时前
学会用最优雅的姿式在Compose中显示富文本
android·kotlin·android jetpack
我命由我123451 天前
Android Studio 提示信息 ‘equals(““)‘ can be replaced with ‘isEmpty()‘
android·ide·android studio·安卓·android jetpack·android-studio·android runtime
刘龙超2 天前
如何应对 Android 面试官 -> 运用 Jetpack 写一个音乐播放器(一)基础搭建
android jetpack
消失的旧时光-19433 天前
Android Jetpack 组件库 ->Jetpack Navigation (下)
android·android jetpack
ljt27249606613 天前
Compose笔记(三十八)--CompositionLocal
笔记·android jetpack
_一条咸鱼_4 天前
Android Runtime性能计数器实现深度剖析(95)
android·android jetpack
搬砖不得颈椎病5 天前
Compose 中的 Side-effects
android·android jetpack
_一条咸鱼_5 天前
Android Runtime死代码消除原理深度剖析(93)
android·面试·android jetpack
equationl6 天前
安卓开发中使用 kotlin Object 和 lazy 关键字以及 Room 踩坑记录
前端·数据库·android jetpack