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),
  )
}
相关推荐
天花板之恋21 小时前
Compose状态管理
android jetpack
alexhilton2 天前
面向开发者的系统设计:像建筑师一样思考
android·kotlin·android jetpack
Lei活在当下3 天前
【业务场景架构实战】4. 支付状态分层流转的设计和实现
架构·android jetpack·响应式设计
天花板之恋3 天前
Compose之图片加载显示
android jetpack
消失的旧时光-19434 天前
Kotlinx.serialization 使用讲解
android·数据结构·android jetpack
Tans54 天前
Androidx Fragment 源码阅读笔记(下)
android jetpack·源码阅读
Lei活在当下5 天前
【业务场景架构实战】2. 对聚合支付 SDK 的封装
架构·android jetpack
Tans57 天前
Androidx Fragment 源码阅读笔记(上)
android jetpack·源码阅读
alexhilton9 天前
runBlocking实践:哪里该使用,哪里不该用
android·kotlin·android jetpack
Tans511 天前
Androidx Lifecycle 源码阅读笔记
android·android jetpack·源码阅读