Jetpack Compose 更改滑块拇指大小

Question

有什么方法可以改变滑块拇指的大小吗？我想现在我们只能操纵颜色

var sliderPosition by remember { mutableStateOf(0f) }
Text(text = sliderPosition.toString())
Slider(
    value = sliderPosition,
    onValueChange = { sliderPosition = it },
    valueRange = 0f..100f,
    onValueChangeFinished = {
        // launch some business logic update with the state you hold
        // viewModel.updateSelectedSliderValue(sliderPosition)
    },
    steps = 5,
    colors = SliderDefaults.colors(
        thumbColor = MaterialTheme.colors.secondary,
        activeTrackColor = MaterialTheme.colors.secondary
    )
)

Answer 1

不，这个尺寸不能修改。您唯一可以做的就是将整个 Slider.kt 文件复制到您的项目中并进行修改。

最好给新视图起一个不同的名字，以避免将来产生误解。

您应该更改 ThumbRadius常量，或者如果您的应用程序需要不同的大小，则将其设为变量。

Answer 2

我创建了一个库来轻松自定义 Slider，因为 Material 包中的 Slider 不灵活。 https://github.com/krottv/compose-sliders。下面是如何使用它来缩小拇指大小的代码示例：

var stateSlider by remember { mutableStateOf(0.5f) }
SliderValueHorizontal(
    stateSlider, { stateSlider = it },
    modifier = Modifier
        .fillMaxWidth(),
    // desired size of Slider's thumb
    thumbSize = DpSize(8.dp, 8.dp)
)

您还可以为拇指和轨道指定自定义可组合项。

Answer 3

是的，但只是用 AndroidView 包装它并等待更好的未来，当 Google 团队在 Material 库中发布另一个更新时。

这是一个例子

  AndroidView(
    modifier = Modifier...//,
    factory = { context ->
      Slider(
        ContextThemeWrapper(context, context.theme)
      ).apply {
      // set listeners
      it.addOnSliderTouchListener(object : SliderView.OnSliderTouchListener {
        @SuppressLint("RestrictedApi")
        override fun onStartTrackingTouch(slider: Slider) = Unit

        @SuppressLint("RestrictedApi")
        override fun onStopTrackingTouch(slider: Slider) {
          onValueChangeFinished.invoke()
        }
      })
      it.addOnChangeListener { _, value, _ ->
        onValueChanged.invoke(value)
      }
        // your thumb customization
        // your track customization
      }
  }, update = {
      // set value
      it.value = currentValue
  })

应该放在@Composable

里面

Jetpack Compose 更改滑块拇指大小

Jetpack Compose Change Slider Thumb Size

slider

android-jetpack-compose

seekbar-thumb