FAB Menu:从一个主要动作展开相关动作 · AndroidX 源码指南
AAndroidX 源码指南
M3E 设计系统
M3E 设计系统 · androidx.compose.material3

FAB Menu:从一个主要动作展开相关动作1.5.0-alpha25

使用 ToggleFloatingActionButton 驱动菜单展开进度,并用 FAB Menu item 组织相关动作。

最后更新 2026-08-01

FAB Menu Expressive

适用场景

当一个主要动作有少量紧密相关的子动作时,FAB Menu 可以从一个 Toggle FAB 展开。它不是通用导航,也不适合塞入大量设置项。

核心 API 包括:

  • FloatingActionButtonMenu
  • FloatingActionButtonMenuItem
  • ToggleFloatingActionButton
  • ToggleFloatingActionButtonDefaults

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(打开/关闭动作菜单)。