在Jetpack Compose中创建垂直滑块 [英] Create Vertical Sliders in Jetpack Compose

问题描述

我正在构建一个Android App，需要在同一页面创建几个垂直滑块来调整音乐均衡器，但是我只能在官方材料设计文档中找到水平滑块。

我尝试从官方文档实现默认滑块，并使用Modify旋转它，它起作用了，但问题是我现在无法使用Modify调整高度。

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

推荐答案

您旋转的滑块不会填满可用高度，因为旋转后它得到了错误的约束。若要解决此问题，您首先需要交换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应放在旋转后。查看有关this answer

中修改量顺序为何重要的详细信息

滑块的最终修饰符：

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)

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