为何TopAppBar的navigationIcon无法使用可组合函数？

问题原因 #

你遇到的错误核心是误用了TopAppBar的重载函数：你当前调用的版本中，title参数接受的是普通String类型，navigationIcon也不是可组合函数类型，导致你在lambda内部调用IconButton、Icon这类可组合函数时，违反了Compose必须在@Composable上下文执行的规则。另外，你在TopAppBar后额外添加的空lambda也是多余的，正确的重载不需要这个参数。

修复方案 #

使用TopAppBar的正确重载，让title和navigationIcon接受可组合函数类型参数：

@Composable
fun AppBar(onClick: () -> Unit){
    TopAppBar(
        title = { Text("Princess World") }, // 用Text可组合函数包裹文本内容
        navigationIcon = { 
            IconButton(onClick = onClick) {
                Icon(imageVector = Icons.Default.Menu, contentDescription = "菜单")
            } 
        }
    )
    // 移除多余的空尾随lambda
}

额外注意事项 #

• 确保导入的是Material库的正确组件：import androidx.compose.material.TopAppBar
• 如果你使用的是Material3，对应组件为SmallTopAppBar/CenterAlignedTopAppBar，用法逻辑一致：

// Material3示例
@Composable
fun AppBar(onClick: () -> Unit){
    SmallTopAppBar(
        title = { Text("Princess World") },
        navigationIcon = {
            IconButton(onClick = onClick) {
                Icon(Icons.Default.Menu, contentDescription = "菜单")
            }
        }
    )
}

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