Android 如何使用Jetpack Compose创建带有溢出菜单的工具栏？

如何在Compose中将工具栏的菜单图标变成溢出

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "LayoutsCodelab")
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Favorite)
                }

                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Refresh)
                }

                IconButton(
                    onClick = { /* doSomething() */ }) {
                    Icon(Icons.Filled.Call)
                }

            }
        )
    },
    bottomBar = {
        BottomNavigationLayout()
    }
) { innerPadding ->
    PhotoCard(Modifier.padding(innerPadding))
}

我只希望工具栏菜单中的一个图标可见，其他图标将添加到溢出菜单中，就像使用

app:showAsAction=“never”

---

您必须自己提供溢出菜单，例如：

@Preview
@Composable
fun PreviewOverflowMenu() {
    OverflowMenuTest()
}

@Composable
fun OverflowMenuTest() {
    var showMenu by remember { mutableStateOf(false) }

    TopAppBar(
        title = { Text("Title") },
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(Icons.Default.Favorite)
            }
            IconButton(onClick = { showMenu = !showMenu }) {
                Icon(Icons.Default.MoreVert)
            }
            DropdownMenu(
                expanded = showMenu,
                onDismissRequest = { showMenu = false }
            ) {
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Refresh)
                }
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Call)
                }
            }
        }
    )
}

---

编辑：为Compose 1.0.0-beta08更新，灵感来源于

@jns

的答案，我制作了一个

动作菜单

可组合，其中包含一个

动作项规范

对象列表。并在必要时显示溢出菜单。我对

ActionItemSpec

进行了建模，有点像旧的XML菜单项条目，但添加了onClick lambda

它是这样使用的

@预览
@组合的
趣味预览功能表（）{
val项目=列表项目(
ActionItemSpec（“调用”，Icons.Default.Call，ActionItemMode.ALWAYS_SHOW）{}，
ActionItemSpec（“发送”，Icons.Default.Send，ActionItemMode.IF_ROOM）{}，
ActionItemSpec（“Email”，Icons.Default.Email，ActionItemMode.IF_ROOM）{}，
ActionItemSpec（“删除”，Icons.Default.Delete，ActionItemMode.IF_ROOM）{}，
)
TopAppBar(
title={Text（“应用程序栏”）}，
导航图标={
图标按钮（onClick={}）{
图标（Icons.Default.Menu，“菜单”）
}
},
行动={
//显示3个图标，包括溢出
操作菜单（项目，默认图标空间=3）
}
)
}

预览像这样

---

这里有完整的粘贴箱：

干得好。一个小小的调整可能是对ActionMenu的内容使用DSL样式的定义：“ActionMenu（…）{ActionItemSpec（…）ActionItemSpec（…）…}”。

@Preview
@Composable
fun PreviewOverflowMenu() {
    OverflowMenuTest()
}

@Composable
fun OverflowMenuTest() {
    var showMenu by remember { mutableStateOf(false) }

    TopAppBar(
        title = { Text("Title") },
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(Icons.Default.Favorite)
            }
            IconButton(onClick = { showMenu = !showMenu }) {
                Icon(Icons.Default.MoreVert)
            }
            DropdownMenu(
                expanded = showMenu,
                onDismissRequest = { showMenu = false }
            ) {
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Refresh)
                }
                DropdownMenuItem(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.Call)
                }
            }
        }
    )
}