在Jetpack Compose中创建带有标签的垂直滑块 [英] Create vertical slider with label in Jetpack Compose

问题描述

我基于this answer制作了一个垂直滑块，现在需要为每个滑块添加标题和值。

如果我在修饰符中设置一个固定的宽度值modifier.width(180.dp)，它看起来就像这样

但是，我想让滑块高度与设备屏幕大小相对应，因此我将宽度设置为modifier.fillMaxWidth()，底部文本将消失

这是我的垂直滑块构图，我尝试在此处设置修改器中的高度。

@Composable
fun VerticalSlider(value: MutableState<Float>, min: Int, max: Int, onFinished:(Int)->Unit) {
    Slider(
        modifier = Modifier
            .graphicsLayer {
                rotationZ = 270f
                transformOrigin = TransformOrigin(0f, 0f)
            }
            .layout { measurable, constraints ->
                val placeable = measurable.measure(
                    Constraints(
                        minWidth = constraints.minHeight,
                        maxWidth = constraints.maxHeight,
                        minHeight = constraints.minWidth,
                        maxHeight = constraints.maxWidth,
                    )
                )
                layout(placeable.height, placeable.width) {
                    placeable.place(-placeable.width, 0)
                }
            }
//            .fillMaxWidth()
            .width(180.dp)
            .height(50.dp)
        ,
        value = value.value,
        valueRange = min.toFloat()..max.toFloat(),
        onValueChange = {
            value.value = it.toInt().toFloat()
        },
        onValueChangeFinished = {
            onFinished(value.value.toInt())
        },
    )
}

带文本的垂直滑块。

@Composable
fun VerticalSliderWithText(sliderValue: MutableState<Float>, min: Int, max: Int, onFinished:(Int)->Unit) {
    var sliderValue = remember { mutableStateOf(0f) }
        Column(
            modifier = Modifier
                .fillMaxSize(),
            verticalArrangement = Arrangement.SpaceAround,
            horizontalAlignment = Alignment.CenterHorizontally
        ){
            Text("slider title")
            VerticalSlider(value = sliderValue, min = -6, max = 6,
            ) {
                //println(" finish value: $it")
            }
            Text(modifier = Modifier.background(Green),
                text="slider value")
        }
}

推荐答案

而不是Modifier.fillMaxWidth，您需要使用Modifier.weight，它位于Column中。为此，您需要添加一个修饰符参数：

@Composable
fun VerticalSlider(value: MutableState<Float>, min: Int, max: Int, onFinished:(Int)->Unit, modifier: Modifier) {
    Slider(
        modifier = modifier
            //...

所以您可以像这样传递Modifier.weight：

Column(
    modifier = Modifier
        .fillMaxSize(),
    verticalArrangement = Arrangement.SpaceAround,
    horizontalAlignment = Alignment.CenterHorizontally
){
    Text("slider title")
    VerticalSlider(
        value = sliderValue,
        min = -6,
        max = 6,
        onFinished = {
            //println(" finish value: $it")
        },
        modifier = Modifier.weight(1f)
    )

或者，您也可以在ColumnScope上声明VerticalSlider，这样Modifier.weight就可以直接从函数中使用：

@Composable
fun ColumnScope.VerticalSlider(value: MutableState<Float>, min: Int, max: Int, onFinished:(Int)->Unit) {
    Slider(
        modifier = Modifier
            .weight(1f)
            //...

这篇关于在Jetpack Compose中创建带有标签的垂直滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！