M3E 设计系统
M3E 设计系统 · androidx.compose.material3
FAB Menu:从一个主要动作展开相关动作1.5.0-alpha25
使用 ToggleFloatingActionButton 驱动菜单展开进度,并用 FAB Menu item 组织相关动作。
最后更新 2026-08-01

适用场景
当一个主要动作有少量紧密相关的子动作时,FAB Menu 可以从一个 Toggle FAB 展开。它不是通用导航,也不适合塞入大量设置项。
核心 API 包括:
FloatingActionButtonMenuFloatingActionButtonMenuItemToggleFloatingActionButtonToggleFloatingActionButtonDefaults
progress 是连接点
Toggle FAB 暴露 checked progress;Defaults 可以根据 progress 计算 container color、size、corner radius、icon color 和 icon size。Modifier.animateIcon 用同一个进度驱动图标变化。
这意味着容器和图标应共享同一展开状态,而不是分别启动不相关动画。
无障碍
折叠时 contentDescription 要描述“打开动作菜单”,展开后应描述“关闭”;每个 MenuItem 仍需自己的动作名称。
复制即用
从一个 Toggle FAB 展开相关动作:
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.FloatingActionButtonMenu
import androidx.compose.material3.FloatingActionButtonMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.ToggleFloatingActionButton
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
@Composable
fun FabMenu() {
var progress by remember { mutableFloatStateOf(0f) }
val expanded = progress > 0f
FloatingActionButtonMenu(
expanded = expanded,
onExpandedChange = { progress = if (it) 1f else 0f },
toggleFloatingActionButton = {
ToggleFloatingActionButton(
checked = expanded,
onCheckedChange = { progress = if (it) 1f else 0f },
icon = {
Icon(Icons.Filled.Add, contentDescription = "打开动作菜单")
},
containerColor = ToggleFloatingActionButtonDefaults.containerColor()(progress),
containerSize = ToggleFloatingActionButtonDefaults.containerSize()(progress),
containerCornerRadius =
ToggleFloatingActionButtonDefaults.containerCornerRadius()(progress),
)
},
) {
FloatingActionButtonMenuItem(onClick = {}, label = "分享") {}
FloatingActionButtonMenuItem(onClick = {}, label = "下载") {}
}
}ToggleFloatingActionButtonDefaults 的属性返回 (Float) -> Color/Dp 函数,用同一个 progress 驱动容器、图标和菜单的展开状态;折叠/展开时记得切换 contentDescription(打开/关闭动作菜单)。