Android Jetpack Compose(M3)：能否自动将操作项折叠到溢出菜单？

核心结论 #

Material 3 的 TopAppBar 没有原生支持根据屏幕尺寸/布局自动将多余操作图标折叠到溢出菜单的机制，官方设计指南仅给出交互规范，具体适配需要开发者手动实现。

手动适配思路 #

要实现根据屏幕尺寸调整操作图标显示数量的需求，通常可以这么做：

• 利用平台的屏幕断点工具（比如Android Jetpack Compose的WindowSizeClass、Web Material UI的useMediaQuery）判断当前屏幕尺寸类别（紧凑/中等/大屏）。
• 根据屏幕尺寸动态控制显示的操作图标数量：比如紧凑屏只显示2个图标+溢出菜单，中等屏显示3个+溢出，大屏显示全部图标。
• 将超出显示数量的操作项统一放入溢出菜单中，替代第三个操作项（遵循官方指南的要求）。

举个Jetpack Compose的简化示例：

val windowSizeClass = calculateWindowSizeClass(activity = LocalContext.current as Activity)
val visibleActions = when (windowSizeClass.widthSizeClass) {
    WindowWidthSizeClass.Compact -> actions.take(2)
    WindowWidthSizeClass.Medium -> actions.take(3)
    else -> actions // 大屏显示全部
}
val overflowActions = actions.drop(visibleActions.size)

TopAppBar(
    title = { Text("标题") },
    actions = {
        visibleActions.forEach { action ->
            IconButton(onClick = { /* 操作逻辑 */ }) {
                Icon(imageVector = action.icon, contentDescription = action.label)
            }
        }
        if (overflowActions.isNotEmpty()) {
            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                overflowActions.forEach { action ->
                    DropdownMenuItem(onClick = { 
                        /* 操作逻辑 */
                        expanded = false 
                    }) {
                        Text(action.label)
                    }
                }
            }
        }
    }
)

补充说明 #

你搜索到的"TopAppBar collapse"相关内容，大多指的是滚动时的折叠/隐藏行为（比如滚动内容时TopAppBar收缩为只显示标题），和官方指南中提到的"多余图标移入溢出菜单"是完全不同的交互逻辑，两者没有关联。

内容的提问来源于stack exchange，提问作者MW2023