如何实现从下到上布局(Btt)？解决Popup中动画方向异常问题

问题原因 #

在Scaffold中，浮动按钮（FAB）位于页面底部，关联的按钮列表默认布局在FAB上方，此时expandVertically()默认从Alignment.Top展开的动画，视觉上呈现为从下到上的效果。但在Popup组件中，内容的布局锚点与Scaffold不同，默认的展开方向会变为从上到下，不符合预期。

解决方案 #

通过明确指定动画的展开/收缩起始点，并配合Popup的锚点设置，即可修复动画方向：

1. 修改AnimatedVisibility的动画参数 #

将expandVertically的expandFrom和shrinkVertically的shrinkTowards参数设置为Alignment.Bottom，强制动画从底部开始向上展开：

AnimatedVisibility(
    visibleState = expandedState,
    content = content,
    enter = fadeIn() + expandVertically(expandFrom = Alignment.Bottom),
    exit = fadeOut() + shrinkVertically(shrinkTowards = Alignment.Bottom),
)

2. 调整Popup的锚点与偏移 #

确保Popup的位置对齐FAB的上方，让动画的起始位置贴合FAB，提升视觉连贯性：

Popup(
    // 让Popup底部对齐FAB的顶部区域
    alignment = Alignment.BottomCenter,
    offset = Offset(0.dp, -16.dp), // 根据FAB大小调整偏移量
    onDismissRequest = { expandedState.collapse() } // 点击外部关闭弹窗
) {
    // 放入修改后的AnimatedVisibility组件
    AnimatedVisibility(
        visibleState = expandedState,
        content = content,
        enter = fadeIn() + expandVertically(expandFrom = Alignment.Bottom),
        exit = fadeOut() + shrinkVertically(shrinkTowards = Alignment.Bottom),
    )
}

原理说明 #

expandVertically()默认以Alignment.Top作为展开起点，在Popup中，内容容器的顶部是弹窗的最上方，因此默认动画会从上往下展开。指定expandFrom = Alignment.Bottom后，动画会从弹窗的底部（即靠近FAB的一端）向上延伸，实现预期的从下到上展开效果。

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