M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Floating Toolbar：可展开、可溢出、可随滚动隐藏1.5.0-alpha25
选择水平或垂直 FloatingToolbar，正确处理 expanded、FAB 组合、滚动与 TalkBack。
最后更新 2026-08-01
基本结构
HorizontalFloatingToolbar(
expanded = expanded,
leadingContent = { /* 展开时显示 */ },
trailingContent = { /* 展开时显示 */ },
) {
IconButton(onClick = {}) { /* 始终显示 */ }
}水平与垂直版本都支持 expanded；leading/trailing 只在展开状态出现，主 content 保持可见。
与 FAB 组合
另一个重载接收 adjacent floatingActionButton。源码建议使用 FloatingToolbarDefaults.VibrantFloatingActionButton 或 StandardFloatingActionButton，因为 Toolbar 会控制 FAB 尺寸并随状态动画。
滚动行为怎么选
- 靠左右边缘：可以根据滚动折叠 actions。
- 位于上下中央：更适合让整个 toolbar 随 scrollBehavior 离场，避免只剩 FAB 后偏离中心。
- 页面有 Snackbar：官方 KDoc 建议放进 Scaffold 的 FAB slot，防止重叠。
TalkBack 的特殊行为
源码在触摸探索启用时强制保持展开，并停用自动滚动隐藏。这不是 bug，而是避免辅助功能用户失去操作入口。
复制即用
可展开的横向浮动工具栏：
import androidx.compose.material3.HorizontalFloatingToolbar
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
@Composable
fun ExpandableToolbar() {
var expanded by remember { mutableStateOf(false) }
HorizontalFloatingToolbar(
expanded = expanded,
leadingContent = { /* 展开时显示 */ },
trailingContent = { /* 展开时显示 */ },
) {
IconButton(onClick = { expanded = !expanded }) {
/* 始终显示 */
}
}
}页面有 Snackbar 时把 toolbar 放进 Scaffold 的 FAB slot 防止重叠；TalkBack 开启时会强制保持展开。