在 Jetpack Compose 中创建垂直滑块

我正在构建一个Android应用程序，需要在同一页面中创建多个垂直滑块用于音乐均衡器调整，但我只能从官方材料设计文档中找到水平滑块。

我尝试从官方文档中实现默认滑块并使用修改器旋转它并且它可以工作，但问题是我现在无法使用调整高度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()
}

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

Next, 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 with transformOrigin设置为零点，因此更容易计算所需的偏移量Modifier.layout.

最后一部分，尺寸修饰符应该放在后面Modifier.layout，以便在期间获取父视图约束而不是静态约束layout. And 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)