最近在做一个 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进行小部分调整