android - 在 Jetpack Compose 中创建垂直 slider

Question

我正在构建一个Android App，它需要在同一页面中创建多个垂直 slider 来调整音乐均衡器，但我只能从官方 Material 设计文档中找到水平 slider 。
我尝试从官方文档中实现默认 slider 并使用修饰符旋转它并且它可以工作，但问题是我现在无法使用修饰符调整高度。
https://imgur.com/a/G19PsM6

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

您旋转的 slider 不会填充可用高度，因为它在旋转后得到了错误的约束。要解决此问题，您首先需要交换 width和 height值(value)观。
接下来，Modifier.rotate不会改变 View 位置，因此您需要在旋转后手动更新它。要了解发生了什么，您可以运行以下代码:

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))
}

它将产生以下 View :

如您所见，实际 View 框架显示为红色边框，并且您的 View 具有意外偏移。
要修复它，您可以使用 Modifier.layout :您需要交换约束和结果 View 大小尺寸，并恢复偏移量。
我也在使用 Modifier.graphicsLayer与 transformOrigin设置为零点，因此更容易计算 Modifier.layout 中所需的偏移量.
最后一部分，大小修饰符应该放在 Modifier.layout 之后。 , 为了在 layout 期间获得父 View 约束而不是这个静态约束.和 layout应在旋转后放置。在 this answer 中查看更多关于为什么修饰符顺序很重要的信息
slider 的最终修饰符:

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)