Jetpack Compose中如何传递条件参数以正确隐藏navigationIcon？

问题原因 #

你当前的实现是始终给navigationIcon参数传递了一个Composable lambda，仅在lambda内部判断是否绘制图标。但TopAppBar的内部逻辑是只要navigationIcon参数不为null，就会为其预留固定宽度的占位区域，所以即使lambda内不绘制任何内容，空白占位仍然会存在。

修正方案 #

只需要将判断逻辑提到参数赋值层，当不需要显示导航图标时，直接给navigationIcon传null即可，修改后的代码如下：

@Composable
fun DefaultScaffold(
    title: String? = null,
    icon: ImageVector? = null,
    content: @Composable () -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    title?.let {
                        Text(text = it)
                    }
                },
                // 核心修改：条件性传参，icon为null时直接传null，不预留占位
                navigationIcon = icon?.let { iconVec ->
                    {
                        IconButton(onClick = { /* 补充你的点击逻辑 */ }) {
                            Icon(imageVector = iconVec, contentDescription = null)
                        }
                    }
                }
            )
        }
    ) { paddingValues ->
        // 应用Scaffold提供的padding，避免内容被TopAppBar遮挡
        Box(modifier = Modifier.padding(paddingValues)) {
            content()
        }
    }
}

补充说明 #

• 原代码中title区域写死了"My Title"，这里修正为使用传入的title参数，符合函数设计预期。
• 补充了Scaffold内容区域的padding应用，是使用Scaffold的标准规范，可避免内容被顶部导航栏遮挡。

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