在 Jetpack Compose 中创建带标签的垂直滑块

Question

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

如果我像这样在修饰符中设置固定宽度值 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")
        }
}

Answer 1

而不是 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 中创建带标签的垂直滑块

Create vertical slider with label in Jetpack Compose

android-layout

kotlin

android-jetpack-compose