Как увеличить высоту ползунка в Material Design 3

Question

      @Composable
fun SliderWithCustomTrackAndThumb() {
    var sliderPosition by remember { mutableStateOf(0f) }
    val interactionSource = MutableInteractionSource()
    val colors = SliderDefaults.colors(thumbColor = Color.Red, activeTrackColor = Color.Red)
    Column {
        Text(text = sliderPosition.toString())
        Slider(
            modifier = Modifier.semantics { contentDescription = "Localized Description" },
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
            interactionSource = interactionSource,
            thumb = {
                SliderDefaults.Thumb(
                    interactionSource = interactionSource,
                    colors = colors
                )
            },
            track = { sliderPositions ->
                SliderDefaults.Track(
                    colors = colors,
                    sliderPositions = sliderPositions
                )
            }
        )
    }
}

Вышеупомянутая компонуемая функция создает образец ползунка с пользовательским размером большого пальца. Я хочу увеличить размер трека. Как мне это сделать?

Answer 1

Вы можете увеличить или уменьшить размер дорожки и ползунка, используя модификаторы масштаба. Вот как я это делаю:

          @Composable
    private fun Slider() {
        val interactionSource = remember { MutableInteractionSource() }
        Slider(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 8.dp),
            value = 0.5f,
            interactionSource = interactionSource,
            onValueChange = { value: Float -> },
            valueRange = 0f..1f,
            track = { sliderPositions ->
                SliderDefaults.Track(
                    modifier = Modifier.scale(scaleX = 1f, scaleY = 0.5f),
                    sliderPositions = sliderPositions
                )
            },
            thumb = {
                SliderDefaults.Thumb(
                    modifier = Modifier.scale(scaleX = 0.5f, scaleY = 0.5f),
                    interactionSource = interactionSource,
                )
            }
        )
    }

Скриншот