我有一个可展开/可折叠的浮动操作按钮菜单.该菜单具有标签如下的子按钮:

以下是代码:

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不适合这种情况,但我不知道我应该使用什么或如何实现它.

推荐答案

您可以根据传递给MenuItem的FAB size添加填充.在MenuItem中,将Button中的modifier更改为

modifier = modifier
    .padding(size / 2)
    .size(size)
    .clip(CircleShape),

Android相关问答推荐

合成 colored颜色 的GSON反序列化

房间DB:UPSERT返回什么?

这款应用与最新版本的Android不兼容.在Android 14中

使用Kotlin/Compose与Java/XML指南的比较

使用Android Jetpack Compose,为子Composable定义ViewModel是不是一种糟糕的做法?

Play store 的 Play 完整性与 Firebase 应用判断 Play 完整性

我如何比较多个时间范围并在 Android Compose 中并排显示它们

我怎样才能在多行 TextView 旁边有一个 ImageView 并且不超过父级的限制?

Android Studio电鳗:javaHome好像无效

Koin Android-KMM:我有嵌套范围但注入不起作用

调用时 listFiles() nullpointerexception

如何在 Android 应用中录制短视频?

Android Jetpack Compose - 每次文本字段值更改时,可组合函数都会重新组合

如何在 Jetpack Compose 中更改 ModalNavigationDrawer 的抽屉容器 colored颜色 ?

为什么我在 Jetpack Compose 中被警告可选修饰符参数应该具有默认值修饰符?

IconButton 中可绘制的图标是黑色的,尽管它是白色的

如何将新的 ComponentActivity 与 ViewBinding 和其他旧的 AppCompatActivity 组件一起使用

compose :为什么以记住启动的列表触发方式与快照不同

使用 Android 字符串数组在 Room 中迁移

如何增加 BottomSheetDialog 的高度以跟随垂直平移