如何在Jetpack Compose中实现带动画开合菜单的底部导航栏

针对你的需求，AnimatedVisibility是实现这类带动画的展开/收起菜单的最佳选择，BottomSheetScaffold更适合全屏或半屏的底部抽屉场景，和你要的“底部导航栏内展开菜单”需求匹配度不高。

核心组件选择理由 #

• AnimatedVisibility：原生支持淡入淡出、滑入滑出等多种预设动画，也支持自定义动画逻辑，能完美满足你对展开/收起过渡效果的需求，且可通过布尔状态灵活控制可见性。
• BottomNavigation：Jetpack Compose提供的标准底部导航栏组件，用来承载基础导航图标，和展开菜单的布局结合自然，符合Android平台的设计规范。

具体实现示例 #

1. 定义状态变量 #

用remember和mutableStateOf维护菜单的展开/收起状态：

var isMenuExpanded by remember { mutableStateOf(false) }

2. 构建底部导航栏布局 #

将基础导航项、触发图标和动画菜单整合到BottomNavigation中：

BottomNavigation(backgroundColor = MaterialTheme.colorScheme.surface) {
    // 基础导航项
    BottomNavigationItem(
        icon = { Icon(Icons.Filled.Home, contentDescription = "首页") },
        selected = false,
        onClick = { /* 首页点击逻辑 */ }
    )
    BottomNavigationItem(
        icon = { Icon(Icons.Filled.Search, contentDescription = "搜索") },
        selected = false,
        onClick = { /* 搜索点击逻辑 */ }
    )

    // 触发菜单展开/收起的图标
    BottomNavigationItem(
        icon = { 
            Icon(
                if (isMenuExpanded) Icons.Filled.Close else Icons.Filled.Add,
                contentDescription = if (isMenuExpanded) "关闭菜单" else "展开菜单"
            )
        },
        selected = isMenuExpanded,
        onClick = { isMenuExpanded = !isMenuExpanded }
    )

    // 带动画的展开菜单
    AnimatedVisibility(
        visible = isMenuExpanded,
        enter = slideInHorizontally(initialOffsetX = { it }) + fadeIn(),
        exit = slideOutHorizontally(targetOffsetX = { it }) + fadeOut()
    ) {
        Row(
            modifier = Modifier.padding(horizontal = 8.dp),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            // 展开的菜单项
            IconButton(onClick = { /* 分享逻辑 */ }) {
                Icon(Icons.Filled.Share, contentDescription = "分享")
            }
            IconButton(onClick = { /* 收藏逻辑 */ }) {
                Icon(Icons.Filled.Favorite, contentDescription = "收藏")
            }
            IconButton(onClick = { /* 设置逻辑 */ }) {
                Icon(Icons.Filled.Settings, contentDescription = "设置")
            }
        }
    }
}

3. 自定义动画（可选） #

如果预设动画不符合需求，可以自定义过渡效果：

val customEnter = expandHorizontally(expandFrom = Alignment.End) + fadeIn(initialAlpha = 0.3f)
val customExit = shrinkHorizontally(shrinkTowards = Alignment.End) + fadeOut(targetAlpha = 0.3f)

// 替换到AnimatedVisibility中使用
AnimatedVisibility(
    visible = isMenuExpanded,
    enter = customEnter,
    exit = customExit
) {
    // 菜单内容
}

注意事项 #

• 若展开的菜单项过多，可通过HorizontalScroll包裹菜单实现横向滚动，避免超出屏幕宽度。
• 利用BottomNavigationItem的selected状态切换样式，让用户更清晰地感知菜单的展开状态。
• 如果需要点击外部收起菜单的逻辑，可通过PointerInputScope监听屏幕触摸事件，在点击非菜单区域时将isMenuExpanded设为false。

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