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
    )
)

- ysfcyln

Answer 1

使用 M3 androidx.compose.material3.Slider，您可以使用thumb属性自定义尺寸。

例如：

var sliderPosition by remember { mutableStateOf(0f) }
Column {
    Text(text = sliderPosition.toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..5f,
        steps = 4,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
        },
        thumb = {
            SliderDefaults.Thumb( //androidx.compose.material3.SliderDefaults
                interactionSource = interactionSource,
                thumbSize = DpSize(40.dp,40.dp)
            )
        },

    )
}

注意：需要使用material3的版本至少为1.0.0-beta03

- Gabriele Mariotti

---

这里的interactionSource是什么？ - Shoaib Kakal

导入 androidx.compose.foundation.interaction.MutableInteractionSource; val interactionSource = MutableInteractionSource() - undefined

Answer 2

不，这个大小不能被修改。你唯一能做的就是将整个Slider.kt文件复制到你的项目中并进行修改。

为了避免未来的误解，最好给新视图命名不同的名称。

如果你的应用程序需要不同的尺寸，你应该改变ThumbRadius常量或将其变成一个变量。

- Phil Dukhov

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内部

• AndroidView in Compose
• Slider in Material

- Akbolat SSS

Answer 4

我创建了一个库，用于轻松自定义滑块，因为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)
)

同时，您还可以为滑块和轨道指定自定义组合。

- Strange Algorithms

---

你能否在回答中添加代码的最相关部分？不用访问外部网站就可以解释清楚是最好的。谢谢。 - Eric Aya