从零开始的自研音乐播放器进程 3.3 UI BottomBar 折叠

可折叠底栏 —— 原型说明 & 接入指南

Apple Music 风格：底部 Tab Bar 和 MiniPlayer 在滚动时从两行压成一行，回到顶部松手自动展开，点击折叠态的 Tab 图标也能展开。

原型文件

位置：app/src/main/java/io/kyonqi/musicplayer/prototype/

文件	作用
CollapsibleBottomBarState.kt	折叠进度 State + NestedScrollConnection
CollapsibleBottomBarScaffold.kt	布局脚手架（展开/折叠两种布局 + 动画）
PrototypeScreen.kt	可跑的 Demo（含 DemoMiniPlayer）

跑原型

在 MainActivity 里临时替换：

setContent {
    MusicPlayerTheme { PrototypeScreen() }
}

---

接入真实 App

1. 给 MiniPlayer 加 compact 参数

ui/component/MiniPlayer.kt：

@Composable
fun MiniPlayer(
    onClick: () -> Unit,
    compact: Boolean = false,          // 新增
    viewModel: MiniPlayerViewModel = hiltViewModel(),
) {
    val state by viewModel.playbackState.collectAsStateWithLifecycle()
    val track = state.currentTrack ?: return

    // 折叠态：胶囊形，去掉 Surface 外壳（由底栏统一给）、去掉进度条、去掉下一首
    if (compact) {
        Row(
            Modifier.fillMaxSize().clickable(onClick = onClick).padding(horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            AlbumArt(uri = track.uri, size = 36.dp,
                modifier = Modifier.clip(RoundedCornerShape(6.dp)))
            Spacer(Modifier.width(8.dp))
            Text(track.title, Modifier.weight(1f),
                style = MaterialTheme.typography.bodyMedium,
                maxLines = 1, overflow = TextOverflow.Ellipsis)
            IconButton(onClick = { viewModel.togglePlayPause() },
                modifier = Modifier.size(36.dp)) {
                Icon(
                    if (state.isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow,
                    null,
                )
            }
        }
        return
    }

    // 展开态：保留你原有的实现，但去掉最外层的 Surface（shape/padding 都由底栏统一）
    Column(Modifier.fillMaxSize().clickable(onClick = onClick)) {
        if (state.durationMs > 0) {
            LinearProgressIndicator(
                progress = { state.positionMs.toFloat() / state.durationMs.toFloat() },
                modifier = Modifier.fillMaxWidth().height(2.dp),
            )
        }
        Row(
            modifier = Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            AlbumArt(uri = track.uri, size = 44.dp,
                modifier = Modifier.clip(RoundedCornerShape(6.dp)))
            Spacer(Modifier.width(12.dp))
            Column(Modifier.weight(1f)) {
                Text(track.title, style = MaterialTheme.typography.bodyMedium,
                    maxLines = 1, overflow = TextOverflow.Ellipsis)
                Text(track.artist, style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                    maxLines = 1)
            }
            IconButton(onClick = { viewModel.togglePlayPause() }) {
                Icon(if (state.isPlaying) Icons.Default.Pause else Icons.Default.PlayArrow, null)
            }
            IconButton(onClick = { viewModel.next() }) {
                Icon(Icons.Default.SkipNext, null)
            }
        }
    }
}

关键：外层 Surface/shape/padding 全由 CollapsibleBottomBarScaffold 提供，MiniPlayer 内部只渲染内容。

2. 改造 AppNavigation.kt

把 Scaffold { bottomBar = Column { MiniPlayer + LibraryBottomBar } } 整个换成 CollapsibleBottomBarScaffold：

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route

    val scannerViewModel: LibraryScannerViewModel = hiltViewModel()
    val scanProgress by scannerViewModel.scanProgress.collectAsStateWithLifecycle()

    val permission = if (Build.VERSION.SDK_INT >= 33) Manifest.permission.READ_MEDIA_AUDIO
                     else Manifest.permission.READ_EXTERNAL_STORAGE
    PermissionHandler(permission = permission,
        onGranted = { scannerViewModel.initLibrary() })

    // Tab 路由按顺序与 tabs 列表一一对应
    val tabRoutes = remember {
        listOf(Routes.SONGS, Routes.ALBUMS, Routes.ARTISTS, Routes.FOLDERS)
    }
    val tabs = remember {
        listOf(
            TabSpec("歌曲", Icons.Default.MusicNote),
            TabSpec("专辑", Icons.Default.Album),
            TabSpec("艺术家", Icons.Default.Person),
            TabSpec("文件夹", Icons.Default.Folder),
        )
    }
    val selectedTab = tabRoutes.indexOf(currentRoute).coerceAtLeast(0)
    val isTabRoute = currentRoute in tabRoutes

    CollapsibleBottomBarScaffold(
        tabs = tabs,
        selectedTab = selectedTab,
        onSelectTab = { i -> navController.navigateToTab(tabRoutes[i]) },
        onSearchClick = { /* TODO: navController.navigate(Routes.SEARCH) */ },
        miniPlayer = { compact, onClick ->
            MiniPlayer(
                compact = compact,
                onClick = {
                    if (compact) onClick()         // 折叠态：展开栏
                    else navController.navigate(Routes.NOW_PLAYING)  // 展开态：打开 NowPlaying
                },
            )
        },
        showBar = isTabRoute,  // NowPlaying / 详情页 隐藏整个底栏
        modifier = Modifier.fillMaxSize(),
    ) { innerPadding, _ ->
        Column(Modifier.fillMaxSize()) {
            if (scanProgress.isScanning) {
                LinearProgressIndicator(
                    progress = {
                        if (scanProgress.total > 0)
                            scanProgress.current.toFloat() / scanProgress.total
                        else 0f
                    },
                    modifier = Modifier.fillMaxWidth(),
                )
            }
            NavHost(
                navController = navController,
                startDestination = Routes.SONGS,
                modifier = Modifier.fillMaxSize(),
            ) {
                composable(Routes.SONGS) {
                    SongListScreen(
                        onNavigateToNowPlaying = { navController.navigate(Routes.NOW_PLAYING) },
                        bottomPadding = innerPadding.calculateBottomPadding(),  // 透传
                    )
                }
                composable(Routes.ALBUMS) {
                    AlbumListScreen(
                        onAlbumClick = { id -> navController.navigate("${Routes.ALBUM_DETAIL}/$id") },
                        bottomPadding = innerPadding.calculateBottomPadding(),
                    )
                }
                // 其余路由同理……
                composable(Routes.NOW_PLAYING /*, transitions = … */) {
                    NowPlayingScreen(onBack = { navController.popBackStack() })
                }
                // 详情 / 搜索 同理
            }
        }
    }
}

3. 让每个 Tab 屏幕把 bottomPadding 应用到列表

以 SongListScreen 为例，给它加一个 bottomPadding: Dp = 0.dp 参数，传给内层 LazyColumn 的 contentPadding：

fun SongListScreen(
    onNavigateToNowPlaying: () -> Unit,
    bottomPadding: Dp = 0.dp,    // 新增
    ...
) {
    // ...
    LazyColumn(
        contentPadding = PaddingValues(
            top = scaffoldPadding.calculateTopPadding(),
            bottom = scaffoldPadding.calculateBottomPadding() + bottomPadding,
        ),
    ) { ... }
}

AlbumListScreen / ArtistListScreen / FolderBrowserScreen 同理。

4. 回弹展开（每个 Tab 屏幕内）

把这段 LaunchedEffect 放到每个 Tab 屏幕的 LazyListState 旁边，让列表滚到顶部停手后自动展开底栏：

// 在每个 Tab 的 Composable 里：
val state = LocalCollapsibleBottomBarState.current  // 见下一步
val listState = rememberLazyListState()
LaunchedEffect(listState, state) {
    if (state == null) return@LaunchedEffect
    snapshotFlow { !listState.canScrollBackward && !listState.isScrollInProgress }
        .distinctUntilChanged()
        .collect { if (it && state.progress > 0f) state.expandNow() }
}

为了不把 state 层层传到每个 Tab，加一个 CompositionLocal：

// 放在 CollapsibleBottomBarState.kt
val LocalCollapsibleBottomBarState =
    compositionLocalOf<CollapsibleBottomBarState?> { null }

在 Scaffold 里把 state 通过 CompositionLocalProvider 下发：

// 在 CollapsibleBottomBarScaffold 的 content 调用处：
CompositionLocalProvider(LocalCollapsibleBottomBarState provides state) {
    content(PaddingValues(bottom = containerHeight), state)
}

5. 清理旧代码

删除 AppNavigation 里：

• 外层 Scaffold
• LibraryBottomBar 私有 composable（被 CollapsibleBottomBarScaffold 内部的 Tab 代替）
• 注释掉的旧代码块（第 202-256 行）
• AnimatedVisibility(showTabBar) { Column { MiniPlayer ... } } 整个结构

navigateToTab 扩展保留，Routes 常量保留。

6. 可选：搜索页

加路由：

// Routes
const val SEARCH = "search"

// 在 NavHost 里：
composable(Routes.SEARCH) {
    SearchScreen(onBack = { navController.popBackStack() })
}

// 在 onSearchClick：
onSearchClick = { navController.navigate(Routes.SEARCH) },

搜索页不在 TabRoutes 里，所以 showBar = false，全屏显示。

---

联动注意事项

1. LargeTopAppBar 共存：Tab 屏幕里用 LargeTopAppBar(scrollBehavior=…) 时，它自己的 NestedScrollConnection 与底栏的 connection 都会看到滚动事件，互不冲突——上滑时两个都会缩起来，正是我们要的行为。
2. 多 Tab 切换保持 state：CollapsibleBottomBarState 由外层 scaffold 持有，切 Tab 时不重建，进度保持。但切 Tab 后列表滚到顶，建议在切 Tab 的回调里顺手 state.expandNow()（体验更一致）。
3. WindowInsets：如果手势导航的 bottom inset 要处理，在 Box(modifier = Modifier.fillMaxWidth().height(containerHeight)…) 上加 .windowInsetsPadding(WindowInsets.navigationBars)。
4. NowPlaying 转场：你原来用 slideIntoContainer(Up) 的切换动画保留即可，底栏因为 showBar=false 会被 AnimatedVisibility 的 slideOutVertically 顺带滑出去，视觉统一。

---

已知局限

• 交叉淡化在中点 (p ≈ 0.5) 仍有极短的两套布局共存窗口（靠 slide + stagger alpha 掩盖）。要达到真·Apple Music 那种同一元素的连续 morph，需要改用 LookaheadLayout 或共享元素过渡，复杂度翻倍，暂未做。
• 松手时若速度为 0、停在半途，onPreFling 仍会被调用处理吸附——这点已经覆盖。
• 搜索按钮在折叠态和展开态尺寸不一致（展开态在 TabRow 右侧 48dp，折叠态独立 52dp）。若强迫症可把两处统一成同尺寸。