Create Vertical Sliders in Jetpack Compose

Question

I am building an Android App which needs to create several vertical sliders in the same page for music equalizer adjustment, but I can only find horizontal sliders from the official material design documents.

I try to implement default slider from official documents and rotate it with modifier and it works, but the problem is that I am not able to adjust the height now using Modifier.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Row(modifier =
            Modifier
                .fillMaxWidth()
                .fillMaxHeight(),
               horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
                ) {
                slider()
                slider()
                slider()
                slider()
                slider()
                slider()
                slider()

            }

        }
    }
}



@Composable
fun slider() : Int
{
    var sliderPosition by remember { mutableStateOf(0f) }

    Slider(
        modifier = Modifier
            .width(50.dp)
            .height(120.dp)
            .background(color = Color.Red)
            .wrapContentSize()
            .rotate(270F)
            .padding(start = 0.5.dp),

        value = sliderPosition,
        valueRange = 1f..10f,
        onValueChange = {sliderPosition = it}
    )

    return sliderPosition.roundToInt()
}

Answer 1

旋转的滑块不会填充可用高度，因为它在旋转后受到错误的约束。要解决这个问题，您首先需要交换width和height值。

接下来，Modifier.rotate不会改变视图位置，因此旋转后需要手动更新。要了解发生了什么，您可以运行以下代码：

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier.fillMaxSize()
) {
    Box(Modifier
        .size(100.dp, 50.dp)
        .border(width = 1.dp, color = Color.Red)
        .rotate(90f)
        .background(Color.Green))
}

它将产生以下视图：

如您所见，真实视图框架显示有红色边框，并且您的视图有意外的偏移。

要修复它，您可以使用Modifier.layout：您需要交换约束和结果视图大小尺寸，并恢复偏移。

另外，我使用Modifier.graphicsLayer设置transformOrigin为零点，因此更容易计算 中所需的偏移量Modifier.layout。

最后一部分，大小修饰符应该放在 后面Modifier.layout，以便在 期间获取父视图约束而不是静态约束layout。并layout应轮换后放置。在此答案中详细了解为什么修饰符顺序很重要

滑块的最终修改器：

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.maxHeight,
            )
        )
        layout(placeable.height, placeable.width) {
            placeable.place(-placeable.width, 0)
        }
    }
    .width(120.dp)
    .height(50.dp)