[安卓原生开发]Jetpack Compose 竖向滑块 VerticalSlider

120 阅读1分钟

最近在做一个 jetpack compose 安卓原生项目,项目中需要实现的滑动条是竖向,而官方给出的Slider默认是横向,最初我找到的解决方案是通过modifier.rotate(-90f),去更改Slider的方向,发现只是内容的形态变了,而其中的实际存在的大小还是和横向一致,且如果添加在复杂的组件中去应用,会发现渲染可能会出错。

最佳实践

我认为的

@Composable
fun YourVerticalSlider(
    value: Float,
    valueRange: ClosedFloatingPointRange<Float>,
    onValueChange: (Float) -> Unit,
    ) {
    Slider(
        value = value,
        valueRange = valueRange,
        onValueChange = onValueChange,
        modifier = Modifier
        // 使用 graphicsLayer 进行图形变换
        .graphicsLayer {
            rotationZ = 270f // 旋转组件 270 度(逆时针旋转)
            transformOrigin = TransformOrigin(0f, 0f) // 设置变换的原点为左上角 (0,0)
        }
        // 使用 layout 修改组件的测量和放置方式
        .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)
            }
        }
    )
}

直接贴出代码做一个记录,作为一个第一次接触原生开发的小白浪费了不少时间说是。其他的组件想要去转换的应该可以直接套用modifier代码,或者可以通过其中的api进行小部分调整