本文介绍了在Jetpack Compose中创建垂直滑块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在构建一个Android App,需要在同一页面创建几个垂直滑块来调整音乐均衡器,但是我只能在官方材料设计文档中找到水平滑块。
我尝试从官方文档实现默认滑块,并使用Modify旋转它,它起作用了,但问题是我现在无法使用Modify调整高度。
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中创建垂直滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!