Jetpack Compose：如何让浮动操作按钮上方的子按钮居中对齐？

要让子按钮（MenuItem中的圆形按钮）在主MenuButton上方居中对齐，核心是拆分主按钮与子按钮的对齐绑定，让主按钮保持右对齐，同时让子按钮的按钮部分与主按钮在同一水平轴线上。以下是两种可行方案：

方案一：通过Row布局调整实现（推荐） #

保持外层Column的右对齐（确保主按钮在右侧），让每个MenuItem的Row占满屏幕宽度，并将内容靠右排列，这样子按钮会自动与主按钮对齐：

1. 修改MenuItem的Row布局，让其占满宽度并靠右排列：

@Composable
fun MenuItem(
    size: Dp,
    label: String,
    @DrawableRes icon: Int,
    onMenuItemClick: () -> Unit,
    modifier: Modifier = Modifier,
    labelModifier: Modifier = Modifier,
    parentModifier:Modifier = Modifier,
) {
    // 让Row占满屏幕宽度，并将内容靠右排列
    Row(
        modifier = parentModifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End,
    ) {
        MenuItemLabel(label = label, modifier = labelModifier)
        Spacer(modifier = Modifier.width(8.dp)) // 保持标签与按钮的间距
        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)
            )
        }
    }
}

2. 调用MenuItem时无需额外修改，外层Column保持horizontalAlignment = Alignment.End即可：

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

方案二：通过Box嵌套精准定位 #

用Box作为容器，将主按钮固定在右下角，子按钮Column对齐到主按钮的中心上方：

val buttonSize = 48.dp
val itemSpacing = 16.dp // 子按钮之间的间距

Box(modifier = Modifier.fillMaxSize()) {
    // 主按钮固定在右下角
    MenuButton(
        modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp),
        buttonSize = buttonSize,
        iconRotationDegree = iconRotationDegree,
        onButtonClick = {
            buttonState = if (buttonState == ButtonState.EXPANDED) ButtonState.COLLAPSED else ButtonState.EXPANDED
        }
    )

    // 子按钮Column对齐到主按钮的中心上方
    Column(
        modifier = Modifier.align(Alignment.BottomEnd)
            .padding(bottom = buttonSize + 16.dp) // 避开主按钮的padding和尺寸
            .offset(x = -(buttonSize / 2 - buttonSize/4)), // 让子按钮中心与主按钮中心对齐（子按钮尺寸是buttonSize/2）
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(itemSpacing)
    ) {
        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(
                size = buttonSize / 2,
                icon = drawable.ic_add,
                label = "Label $index",
                onMenuItemClick = { /*TODO*/ },
                parentModifier = Modifier.fillMaxWidth().wrapContentWidth(Alignment.End) // 标签保持在按钮左侧
            )
        }
    }
}

方案说明 #

• 方案一无需计算偏移量，通过布局属性自动对齐，代码更简洁易维护，适合大多数场景。
• 方案二通过精准的坐标偏移实现对齐，适合需要更精细控制布局的场景。

内容的提问来源于stack exchange，提问作者Jarnojr