我有一个可展开/可折叠的浮动操作按钮菜单.该菜单具有标签如下的子按钮:
以下是代码:
enum class ButtonState {
COLLAPSED,
EXPANDED
}
@Composable
fun MenuButton(
iconRotationDegree: Float,
onButtonClick: () -> Unit,
modifier: Modifier = Modifier,
buttonSize: Dp = 32.dp
) {
Button(
onClick = {
onButtonClick()
},
colors = ButtonDefaults.buttonColors(
backgroundColor = colorResource(
color.primary_color,
),
contentColor = colorResource(color.on_primary)
),
modifier = modifier
.clip(CircleShape)
.size(buttonSize),
contentPadding = PaddingValues(0.dp),
) {
Icon(
painter = painterResource(id = R.drawable.ic_add),
contentDescription = null,
modifier = Modifier
.rotate(iconRotationDegree)
.size(buttonSize / 2f)
)
}
}
@Composable
fun MenuItem(
size: Dp,
label: String,
@DrawableRes icon: Int,
onMenuItemClick: () -> Unit,
modifier: Modifier = Modifier,
labelModifier: Modifier = Modifier,
parentModifier:Modifier = Modifier,
) {
Row(
modifier = parentModifier,
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
MenuItemLabel(label = label, modifier = labelModifier)
Button(
onClick = {
onMenuItemClick()
},
colors = ButtonDefaults.buttonColors(
backgroundColor = colorResource(
R.color.primary_color,
),
contentColor = colorResource(R.color.on_primary)
),
modifier = modifier
.clip(CircleShape)
.size(size),
contentPadding = PaddingValues(0.dp),
) {
Icon(
painter = painterResource(id = icon),
contentDescription = null,
modifier = Modifier
.size(size / 1.8f)
)
}
}
}
val buttonSize = 48.dp
Column(horizontalAlignment = Alignment.End) {
arrange.forEach { index ->
LaunchedEffect(key1 = buttonState) {
val delayDuration = if (buttonState == ButtonState.EXPANDED) 200L else 75L
delay(delayDuration * index)
animatableList[index].animateTo(
if (buttonState == ButtonState.EXPANDED) 1f else 0f,
animationSpec = keyframes {
durationMillis = 200
if (buttonState == ButtonState.EXPANDED) {
0.0f at 0 with LinearEasing
0.2f at 15 with LinearEasing
0.4f at 75 with LinearEasing
0.6f at 100 with LinearEasing
1.0f at 120 with LinearEasing
1.5f at 150 with EaseOutBounce
1.2f at 170 with FastOutLinearInEasing
1.1f at 180 with FastOutLinearInEasing
1.0f at 200 with FastOutLinearInEasing
}
}
)
}
MenuItem(
modifier = Modifier
.scale(1f)
.alpha(1f),
labelModifier = Modifier.alpha(1f),
size = buttonSize / 2,
icon = drawable.ic_add,
label = "Label $index",
onMenuItemClick = { /*TODO*/ })
}
MenuButton(
buttonSize = buttonSize,
iconRotationDegree = iconRotationDegree,
onButtonClick = {
buttonState =
if (buttonState == ButtonState.EXPANDED) ButtonState.COLLAPSED else ButtonState.EXPANDED
})
}
问题是,我希望子按钮在MenuButton
上方居中对齐,如下所示:
但是,如您所见,它们在末尾对齐,因为:Column(horizontalAlignment = Alignment.End)
.如果我将对齐设置为居中,它只会将MenuButton
居中.我想Column
Composable不适合这种情况,但我不知道我应该使用什么或如何实现它.