揭开神秘面纱：这个Compose控件究竟叫什么？

亲爱的Android开发者们，你们是否曾经为一个问题挠破头？Ru果我们使用FloatingActionButton作为App的主要操作按钮时却发现它功Neng不够用！毕竟只有一个按钮。

Zui近，Material Compose带来了一组令人兴奋的新API，它允许我们通过一个可展开的FAB，向用户呈现多个菜单操作。这样，我们就Ke以在菜单中添加多个功Neng，简直是太棒了！

FloatingActionButtonMenu允许我们在屏幕上展示多达8个相关操作，让用户在不牺牲界面空间的前提下访问一组相关动作。从组成上kan，这个composable由三个部分构成：FloatingActionButtonMenuToggleFloatingActionButton和FloatingActionButtonMenuItem。三者组合在一起，形成了一个解耦的API，用来同时构建浮动操作按钮及其展示的菜单项。

要使用FloatingActionButtonMenu，请确保你Yi经使用了Zui新的compose BOM，同时修改material3的版本为1.2.0-alpha17或geng高版本。由于它还处于alpha阶段，后续版本中API细节仍有可Neng调整。

FloatingActionButtonMenu是一个Ke以创建可展开悬浮操作按钮的组件，在触发时会显示额外的菜单项。这与我们熟悉的标准FAB用法不同，因为它让我们Neng够向用户提供多个主操作入口。

@Composable
fun FloatingActionButtonMenu(
    expanded: Boolean,
    button: @Composable  -> Unit,
    modifier: Modifier = Modifier,
    horizontalAlignment: Alignment.Horizontal = Alignment.End,
    content: @Composable FloatingActionButtonMenuScope. -> Unit,
)

借助这一Neng力，我们就Neng在单一主操作之外向用户暴露多个动作。例如我们不必只提供一个“创建”操作，而是Ke以提供多个动作，比如“创建便签”、“创建任务”、“创建事件”等。这样既Neng避免在界面上堆满多个按钮，也Neng把这些动作集中到一个位置，只在用户需要时再展开显示。

ToggleFloatingActionButton的形态与标准FloatingActionButton相似，关键差别在于它支持checked状态。这个checked状态让我们Ke以表达当前FAB是否处于展开状态，也因此Neng表示该按钮的菜单是否应该显示。

@Composable
fun ToggleFloatingActionButton(
    checked: Boolean,
    onCheckedChange:  -> Unit,
    modifier: Modifier = Modifier,
    containerColor:  -> Color = ToggleFloatingActionButtonDefaults.containerColor,
    contentAlignment: Alignment = Alignment.TopEnd,
    containerSize:  -> Dp = ToggleFloatingActionButtonDefaults.containerSize,
    containerCornerRadius:  -> Dp = ToggleFloatingActionButtonDefaults.containerCornerRadius,
    content: @Composable ToggleFloatingActionButtonScope. -> Unit,
)

FloatingActionButtonMenuItemKe以展示扁平风格的悬浮菜单项，它们会垂直堆叠在浮动操作按钮上方，并通过点击事件触发相应操作。

@Composable
fun FloatingActionButtonMenuScope.FloatingActionButtonMenuItem(
    onClick:  -> Unit,
    text: @Composable  -> Unit,
    icon: @Composable  -> Unit,
    modifier: Modifier = Modifier,
    containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
    contentColor: Color = contentColorFor,
)

我们从一个简单的 Floating Action Button Menu 开始，并传入一个展开状态引用。通过组合 Toggle Floating Action Button 和 Floating Action Button Menu Item ，我们Ke以实现一个具有多个菜单项的可展开浮动操作按钮。

 var fab Menu Expanded by remember { mutable State Of }
 Floating Action Button Menu (
     modifier = Modifier . align ,
     expanded = fab Menu Expanded ,
     button = {
         Toggle Floating Action Button (
             checked = fab Menu Expanded ,
             on Checked Change = { fab Menu Expanded = ! fab Menu Expanded }
         ) {
             Icon (
                 painter = remember Vector Painter  Icons . Filled . Close else Icons . Filled . Add ),
                 content Description = null
             )
         }
     },
     content = {
         Floating Action Button Menu Item (
             on Click = { fab Menu Expanded = false },
             icon = { Icon  },
             text = { Text  }
         )
         // ... 其他菜单项
     }
 ) 

Floating Action Button Menu 是 Material 组件库中一个hen不错的补充，它让我们geng容易在 Compose 中构建这类交互，也Nenggeng顺畅地把 View 系统里的既有实现迁移过来。不过从产品设计的角度kan，这个组件也不是“只要功Neng多就往里塞”的万Neng解法。它geng适合承载一组强相关、且用户Neng够快速理解的操作；Ru果菜单项之间缺少明确关联，或者用户需要频繁使用其中某一个动作，那把它们全dou塞进可展开菜单里反而会增加点击路径和理解成本。相比“Neng不Neng用”，我geng倾向于先判断“应不应该用”。Ru果你的页面确实存在一个主操作，以及2到8个围绕这个主操作展开的次级动作，那么 Floating Action Button Menu 会是一个hen自然的选择；但Ru果它只是为了把geng多按钮藏起来那Zui终带来的可Neng不是geng好的体验，而只是geng隐蔽的复杂度。