原型：BottomBar + MiniPlayer 折叠联动

Apple Music 风格：底部 Tab Bar 向下滚动时缩起，MiniPlayer 顶上来占位；向上滚动（或列表回到顶部）时 Bar 回弹，点击折叠态也能重新展开。

本原型是一个最小可跑的独立 Demo，只依赖 Compose BOM、Material3 和 Material Icons Extended。跑通后再把 CollapsibleBottomBarScaffold 接到你的 LibraryScreen 里。

原理速览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
展开态（collapseProgress = 0f）：
┌─────────────────────────┐
│  LazyColumn             │
│                         │
│                         │
├─────────────────────────┤
│  MiniPlayer   (56dp)    │
├─────────────────────────┤
│  BottomBar    (80dp)    │
└─────────────────────────┘

折叠态（collapseProgress = 1f）：
┌─────────────────────────┐
│  LazyColumn             │
│                         │
│                         │
│                         │
├─────────────────────────┤
│  MiniPlayer   (56dp)    │  ← Bar 整个 translateY 下去，MiniPlayer 原地不动
└─────────────────────────┘   点击 MiniPlayer 上方的"抓手"区域可展开
  • 状态：collapseProgress: Float（0=展开，1=折叠），由 NestedScrollConnection 的滚动增量驱动。
  • Bar 位移：translationY = collapseProgress * barHeightPx。
  • 回弹：监听 LazyListState，当列表回到顶部（canScrollBackward == false）且手指抬起时 animateTo(0f)。
  • 点击展开：外层暴露 onExpandRequest，点击 MiniPlayer 时调用。

文件清单

Demo 放在一个独立 package，不影响你现有代码：

1
2
3
4
prototype/
├── CollapsibleBottomBarScaffold.kt   核心 Scaffold
├── CollapsibleBottomBarState.kt      状态 + NestedScrollConnection
└── PrototypeScreen.kt                Demo 入口（可跑）

1. CollapsibleBottomBarState.kt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
package io.kyonqi.musicplayer.prototype

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.unit.Velocity
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

/**
 * 控制底部 Bar 折叠进度
 * - 0f = 完全展开（Bar 可见）
 * - 1f = 完全折叠（Bar 藏到屏幕下方）
 *
 * @param barHeightPx Bar 的像素高度。进度会映射成位移 = progress * barHeightPx
 */
class CollapsibleBottomBarState(
    val barHeightPx: Float,
    private val scope: CoroutineScope,
) {
    private val _progress = Animatable(0f)
    val progress: Float get() = _progress.value

    /** 由 NestedScrollConnection 调用，返回实际消耗的 dy（像素）*/
    internal suspend fun consumeScroll(dy: Float): Float {
        if (barHeightPx <= 0f) return 0f
        val current = _progress.value * barHeightPx
        val target = (current - dy).coerceIn(0f, barHeightPx)
        val consumed = current - target
        _progress.snapTo(target / barHeightPx)
        return consumed
    }

    suspend fun expand() = _progress.animateTo(0f, tween(220))
    suspend fun collapse() = _progress.animateTo(1f, tween(220))

    /** 给调用方触发展开的便捷方法 */
    fun expandNow() { scope.launch { expand() } }
}

@Composable
fun rememberCollapsibleBottomBarState(
    barHeightPx: Float,
    scope: CoroutineScope,
): CollapsibleBottomBarState = remember(barHeightPx) {
    CollapsibleBottomBarState(barHeightPx, scope)
}

/**
 * 嵌套滚动连接：
 * - 手指上滑（dy<0，内容上移 → Bar 收起）：onPreScroll 先吃掉
 * - 手指下滑（dy>0，内容下移 → Bar 展开）：onPostScroll 在列表已到顶后吃掉
 */
class CollapsibleBottomBarNestedScrollConnection(
    private val state: CollapsibleBottomBarState,
    private val scope: CoroutineScope,
) : NestedScrollConnection {

    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        val dy = available.y
        // 仅处理手指上滑：内容将向上滚，先让 Bar 收起
        if (dy < 0f && state.progress < 1f) {
            var consumed = 0f
            scope.launch { consumed = state.consumeScroll(dy) }
            // 注意：consumeScroll 是 suspend，这里同步返回会拿不到真实值
            // 用 snapTo 的同步版本更稳（见下）
        }
        return Offset.Zero
    }

    override fun onPostScroll(
        consumed: Offset,
        available: Offset,
        source: NestedScrollSource,
    ): Offset {
        val dy = available.y
        if (dy > 0f && state.progress > 0f) {
            scope.launch { state.consumeScroll(dy) }
        }
        return Offset.Zero
    }

    override suspend fun onPreFling(available: Velocity): Velocity {
        // 惯性结束时：半折叠状态吸附到最近的端点
        if (state.progress in 0.01f..0.99f) {
            if (state.progress > 0.5f) state.collapse() else state.expand()
        }
        return Velocity.Zero
    }
}

关键修正：onPreScroll 里用 scope.launch { suspend } 会丢掉"消耗了多少"的同步返回值，列表会继续滚。实际实现应把 consumeScroll 改成同步（用 Animatable.snapTo 的同步封装），见下方"正确版"。

正确版 CollapsibleBottomBarState（同步 consume）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
package io.kyonqi.musicplayer.prototype

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.tween
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.unit.Velocity
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

class CollapsibleBottomBarState(
    val barHeightPx: Float,
    private val scope: CoroutineScope,
) {
    // 同步状态，用于滚动即时驱动
    private var _offsetPx by mutableFloatStateOf(0f)
    val progress: Float
        get() = if (barHeightPx <= 0f) 0f else _offsetPx / barHeightPx

    // 异步动画句柄，用于 expand/collapse
    private val anim = Animatable(0f)

    /** 同步消耗滚动，返回实际消耗的 dy（正值=向上滚被吃掉，负值=向下滚被吃掉）*/
    internal fun consume(dy: Float): Float {
        if (barHeightPx <= 0f) return 0f
        val current = _offsetPx
        val target = (current - dy).coerceIn(0f, barHeightPx)
        val consumed = current - target
        _offsetPx = target
        return consumed
    }

    suspend fun expand() {
        anim.snapTo(_offsetPx)
        anim.animateTo(0f, tween(220)) { _offsetPx = value }
    }

    suspend fun collapse() {
        anim.snapTo(_offsetPx)
        anim.animateTo(barHeightPx, tween(220)) { _offsetPx = value }
    }

    fun expandNow() { scope.launch { expand() } }
    fun collapseNow() { scope.launch { collapse() } }
}

@Composable
fun rememberCollapsibleBottomBarState(
    barHeightPx: Float,
    scope: CoroutineScope,
): CollapsibleBottomBarState = remember(barHeightPx, scope) {
    CollapsibleBottomBarState(barHeightPx, scope)
}

class CollapsibleBottomBarNestedScrollConnection(
    private val state: CollapsibleBottomBarState,
    private val scope: CoroutineScope,
) : NestedScrollConnection {

    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        val dy = available.y
        // 上滑收起 Bar：dy<0 且还没完全折叠时，先吃掉一部分
        if (dy < 0f && state.progress < 1f) {
            val consumed = state.consume(dy)
            return Offset(0f, -consumed)  // 注意符号：消耗的是"向上滚"的量
        }
        return Offset.Zero
    }

    override fun onPostScroll(
        consumed: Offset,
        available: Offset,
        source: NestedScrollSource,
    ): Offset {
        val dy = available.y
        // 下滑展开 Bar：dy>0 且列表已到顶（available 有剩余），吃掉
        if (dy > 0f && state.progress > 0f) {
            val c = state.consume(dy)
            return Offset(0f, -c)
        }
        return Offset.Zero
    }

    override suspend fun onPreFling(available: Velocity): Velocity {
        // 吸附到最近端点
        if (state.progress in 0.01f..0.99f) {
            if (state.progress > 0.5f) state.collapse() else state.expand()
        }
        return Velocity.Zero
    }
}

2. CollapsibleBottomBarScaffold.kt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
package io.kyonqi.musicplayer.prototype

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp

/**
 * 折叠 Bar + MiniPlayer 的 Scaffold
 *
 * @param bottomBar         底部 Tab Bar（会随 progress 折叠）
 * @param miniPlayer        MiniPlayer（始终可见；点击它会触发 onMiniPlayerClick）
 * @param onMiniPlayerClick 点击 MiniPlayer 的回调（折叠态下用于展开 Bar，或打开 NowPlaying）
 * @param content           主体内容，接收 PaddingValues（底部预留了 MiniPlayer 高度，不含 Bar）
 */
@Composable
fun CollapsibleBottomBarScaffold(
    bottomBar: @Composable () -> Unit,
    miniPlayer: @Composable (onClick: () -> Unit) -> Unit,
    modifier: Modifier = Modifier,
    miniPlayerHeight: androidx.compose.ui.unit.Dp = 56.dp,
    bottomBarHeight: androidx.compose.ui.unit.Dp = 80.dp,
    content: @Composable (PaddingValues, CollapsibleBottomBarState) -> Unit,
) {
    val density = LocalDensity.current
    val barHeightPx = with(density) { bottomBarHeight.toPx() }
    val miniHeightPx = with(density) { miniPlayerHeight.toPx() }

    val scope = rememberCoroutineScope()
    val state = rememberCollapsibleBottomBarState(barHeightPx, scope)
    val connection = remember(state) {
        CollapsibleBottomBarNestedScrollConnection(state, scope)
    }

    Layout(
        modifier = modifier.nestedScroll(connection),
        content = {
            // 0: content
            Box(Modifier) {
                // 给 content 的 bottom padding = miniPlayer + (1-progress)*barHeight
                // 折叠时 content 可以延伸到 Bar 原本的位置
                val contentBottom = miniPlayerHeight + bottomBarHeight * (1f - state.progress)
                content(PaddingValues(bottom = contentBottom), state)
            }
            // 1: bottomBar
            Box(
                modifier = Modifier.graphicsLayer {
                    translationY = state.progress * barHeightPx
                    alpha = 1f - state.progress * 0.6f
                },
            ) { bottomBar() }
            // 2: miniPlayer
            Box {
                miniPlayer {
                    // 点击 MiniPlayer：若 Bar 已折叠，先展开；否则走外部逻辑（如打开 NowPlaying）
                    if (state.progress > 0.5f) state.expandNow()
                }
            }
        },
    ) { measurables, constraints ->
        val (contentM, barM, miniM) = measurables
        val width = constraints.maxWidth
        val height = constraints.maxHeight

        val barPlaceable = barM.measure(constraints.copy(minHeight = 0))
        val miniPlaceable = miniM.measure(constraints.copy(minHeight = 0))
        val contentPlaceable = contentM.measure(
            constraints.copy(minHeight = 0, maxHeight = height),
        )

        layout(width, height) {
            contentPlaceable.place(0, 0)
            // Bar 固定在底部；translationY 已经由 graphicsLayer 处理
            barPlaceable.place(0, height - barPlaceable.height)
            // MiniPlayer 紧贴 Bar 顶部；折叠时 Bar 下移，MiniPlayer 跟着下移到屏幕底部
            val miniBottom = height - barPlaceable.height + (state.progress * barHeightPx).toInt()
            miniPlaceable.place(0, miniBottom - miniPlaceable.height)
        }
    }
}

3. PrototypeScreen.kt — 可直接跑的 Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
package io.kyonqi.musicplayer.prototype

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Album
import androidx.compose.material.icons.filled.LibraryMusic
import androidx.compose.material.icons.filled.MusicNote
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.flow.distinctUntilChanged

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PrototypeScreen() {
    var tab by rememberSaveable { mutableIntStateOf(0) }

    CollapsibleBottomBarScaffold(
        bottomBar = { DemoBottomBar(tab) { tab = it } },
        miniPlayer = { onClick -> DemoMiniPlayer(onClick = onClick) },
        onMiniPlayerClick = {},
    ) { innerPadding, state ->
        val listState = rememberLazyListState()

        // 回弹：列表滚到顶且不在滚动中时，自动展开 Bar
        LaunchedEffect(listState) {
            snapshotFlow {
                !listState.canScrollBackward && !listState.isScrollInProgress
            }.distinctUntilChanged().collect { atTopIdle ->
                if (atTopIdle && state.progress > 0f) state.expandNow()
            }
        }

        Scaffold(
            topBar = { TopAppBar(title = { Text("音乐库") }) },
            modifier = Modifier.fillMaxSize(),
        ) { scaffoldPadding ->
            LazyColumn(
                state = listState,
                contentPadding = PaddingValues(
                    top = scaffoldPadding.calculateTopPadding(),
                    bottom = innerPadding.calculateBottomPadding(),
                ),
                modifier = Modifier.fillMaxSize(),
            ) {
                items(100) { i ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp, vertical = 12.dp),
                        verticalAlignment = Alignment.CenterVertically,
                    ) {
                        Box(
                            Modifier
                                .size(48.dp)
                                .clip(RoundedCornerShape(6.dp))
                                .background(MaterialTheme.colorScheme.surfaceVariant),
                            contentAlignment = Alignment.Center,
                        ) {
                            Icon(Icons.Default.MusicNote, null)
                        }
                        Spacer(Modifier.width(12.dp))
                        Text("曲目 #${i + 1}", style = MaterialTheme.typography.titleMedium)
                    }
                    HorizontalDivider(
                        modifier = Modifier.padding(start = 76.dp),
                        thickness = 0.5.dp,
                        color = MaterialTheme.colorScheme.outlineVariant,
                    )
                }
            }
        }
    }
}

@Composable
private fun DemoBottomBar(selected: Int, onSelect: (Int) -> Unit) {
    NavigationBar {
        val items = listOf(
            "歌曲" to Icons.Default.MusicNote,
            "专辑" to Icons.Default.Album,
            "艺术家" to Icons.Default.Person,
            "资料库" to Icons.Default.LibraryMusic,
        )
        items.forEachIndexed { i, (label, icon) ->
            NavigationBarItem(
                selected = selected == i,
                onClick = { onSelect(i) },
                icon = { Icon(icon, null) },
                label = { Text(label) },
            )
        }
    }
}

@Composable
private fun DemoMiniPlayer(onClick: () -> Unit) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .clickable(onClick = onClick),
        color = MaterialTheme.colorScheme.surfaceContainer,
        tonalElevation = 3.dp,
    ) {
        Row(
            modifier = Modifier.padding(horizontal = 12.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Box(
                Modifier
                    .size(40.dp)
                    .clip(RoundedCornerShape(6.dp))
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center,
            ) { Icon(Icons.Default.MusicNote, null) }
            Spacer(Modifier.width(12.dp))
            Text(
                "正在播放 - 示例歌曲",
                modifier = Modifier.weight(1f),
                style = MaterialTheme.typography.bodyLarge,
            )
            IconButton(onClick = {}) {
                Icon(Icons.Default.PlayArrow, contentDescription = "播放/暂停")
            }
        }
    }
}

// 补：LazyColumn items 扩展
private fun androidx.compose.foundation.lazy.LazyListScope.items(
    count: Int,
    itemContent: @Composable (Int) -> Unit,
) = items(count = count) { itemContent(it) }

onMiniPlayerClick 参数在 Scaffold 签名里我写过但 Demo 没用到——你接到真实工程时可以把它串到导航（点击跳 NowPlaying）。

如何跑这个 Demo

把 PrototypeScreen() 挂到 MainActivity.setContent { MusicPlayerTheme { PrototypeScreen() } }，跑起来应该看到：

  1. ✅ 向上滑列表：BottomBar 跟手指同步缩下去（不是先滑列表再收 Bar）
  2. ✅ 滑到底继续上滑：Bar 完全藏起，MiniPlayer 顶到屏幕底部
  3. ✅ 向下滑：列表先滚；到顶后继续下滑 → Bar 展开
  4. ✅ 惯性结束半折叠 → 吸附到最近端点
  5. ✅ 列表滚回顶部停手 → 自动展开
  6. ✅ 折叠态点击 MiniPlayer → Bar 展开（而不是打开 NowPlaying）

已知坑 / 需要你在接入真实工程时注意

  1. 多 Tab 切换丢进度：你的 LibraryScreen 有 4 个 Tab，每个 Tab 一个 LazyColumn。CollapsibleBottomBarState 要提升到 Tab 宿主之上（Scaffold 层），所有子 LazyColumn 都挂在同一个 nestedScroll(connection) 之下。示例里是单层所以不用考虑。
  2. WindowInsets：Demo 没处理手势导航条。接入时 BottomBar 要用 Modifier.windowInsetsPadding(WindowInsets.navigationBars)，否则折叠后会有一条透明的空隙。
  3. MiniPlayer 尺寸插值（可选增强）：如果想让 MiniPlayer 在折叠时变小（像 Apple Music 那样），在 Box { miniPlayer { ... } } 外再加个 graphicsLayer { scaleX = 1f - 0.1f * state.progress; scaleY = ... }，或者把 progress 传给 MiniPlayer 让它内部响应。
  4. 与 LargeTopAppBar 协同：如果你的 LibraryScreen 顶部是 LargeTopAppBar(scrollBehavior=...)，两个 NestedScrollConnection 会同时接收事件，它们互不冲突（都读 available.y），但展开/收起的方向相反——上滑时 TopAppBar 收起 + BottomBar 也收起，这正是我们想要的。
  5. 嵌套滚动的 onPreScroll 返回值符号：Compose 的约定是 Offset(x, y) 里的 y 表示"已消耗的位移量，正值=向下"。我们消耗掉 dy 的一部分时返回 Offset(0f, -consumed)，因为 consumed 按我们的定义是正的（吃掉了多少"向上滚"的量）。跑的时候如果方向反了，把这里的符号翻过来。
  6. onPreFling 吸附：用户快速滑动松手后会走 fling，我们在 fling 前强制吸附。如果你想让 fling 的惯性也影响 Bar（像 iOS 那样），要改成 onPostFling 里消耗 velocity —— 但那会让行为变得更难预测，先用吸附方案。

下一步

跑通这个 Demo 后，把 CollapsibleBottomBarScaffold 替换到 MainActivity / AppNavigation 层：

  • 外层：CollapsibleBottomBarScaffold { padding, state -> NavHost(...) }
  • bottomBar：你的 4-Tab NavigationBar
  • miniPlayer：现有的 MiniPlayer 组件
  • 每个 Tab 的 LazyColumn 无需改动——nestedScroll 自动向上冒泡

只要 MainActivity 一处挂接，整个 app 都能享受折叠联动。

说些什么吧！

beaudar