添加文本后Floating Button位置偏移问题排查

问题描述 #

在FloatingButtonView.kt中实现的浮动按钮组，点击主按钮展开子按钮时，无文本的子按钮位置正常；但给子按钮添加文本后，展开时子按钮会跳转到屏幕其他位置，关闭时恢复原状。

核心原因 #

问题出在布局约束的变化上：

• 无文本版本中，子按钮是固定尺寸（56dp）的FloatingActionButton，外层Column宽度仅包裹按钮，align(Alignment.BottomEnd)能稳定让按钮靠右对齐。
• 添加文本后，FloatingActionButtonWithText使用Row包裹文本和按钮，Row默认宽度为内容宽度（文本+按钮）。此时外层Column的宽度会随Row内容变化，而Alignment.BottomEnd是让Column的右下角对齐父容器右下角，导致Column整体向左偏移，视觉上表现为按钮跳转。
• 同时，AnimatedVisibility的slideInVertically动画基于布局约束计算，约束变化会加剧位置跳动的视觉效果。

修复方案 #

调整内层布局的宽度约束，让带文本的按钮组始终靠右对齐，不受内容宽度影响：

修改代码 #

1. 给AnimatedVisibility内部的Column添加fillMaxWidth()修饰符，确保该Column宽度占满父容器，同时保留horizontalAlignment = Alignment.End让子元素靠右：

AnimatedVisibility(
    visible = expanded,
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + slideOutVertically()
) {
    Column(
        modifier = Modifier.fillMaxWidth(), // 添加该行约束
        horizontalAlignment = Alignment.End,
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        // 子按钮代码保持不变
    }
}

2. （可选优化）给FloatingActionButtonWithText的Row添加fillMaxWidth()和horizontalArrangement = Arrangement.End，进一步确保内容靠右对齐：

@Composable
fun FloatingActionButtonWithText(
    onClick: () -> Unit,
    iconId: Int,
    text: String,
    backgroundColor: Color
) {
    Row(
        modifier = Modifier.fillMaxWidth(), // 添加该行约束
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End // 添加该行约束
    ) {
        // 文本和按钮代码保持不变
    }
}

修改后，无论子按钮是否带文本，都会稳定对齐屏幕右下角，展开/收起时不会出现位置跳转。

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