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),
  )
}
相关推荐
alexhilton11 分钟前
runBlocking实践:哪里该使用,哪里不该用
android·kotlin·android jetpack
Tans52 天前
Androidx Lifecycle 源码阅读笔记
android·android jetpack·源码阅读
ljt27249606614 天前
Compose笔记(四十九)--SwipeToDismiss
android·笔记·android jetpack
4z336 天前
Jetpack Compose重组优化:机制剖析与性能提升策略
性能优化·android jetpack
alexhilton6 天前
Android ViewModel数据加载:基于Flow架构的最佳实践
android·kotlin·android jetpack
水牛9 天前
一行代码完成startActivityForResult
android·android jetpack
kymjs张涛9 天前
零一开源|前沿技术周刊 #14
android·android studio·android jetpack
alexhilton10 天前
Android应用的架构演进
android·kotlin·android jetpack
fundroid11 天前
全新 LifecycleOwner 可组合项:让 Composable 具备独立生命周期
android jetpack
alexhilton14 天前
Compose Unstyled:Compose UI中失传的设计系统层
android·kotlin·android jetpack