Compose自定义TopAppBar：解决null回调时空导航图标占位问题

问题场景 #

我编写了如下Kotlin代码实现自定义TopAppBar组件，需求是：

• 创建可复用的自定义TopAppBar组件
• 所有顶部栏必须传入标题
• 可选传入返回按钮点击回调，回调非空时显示返回图标，回调为空时不渲染navigationIcon

原代码：

@Composable
fun CustomBar(title: String, onBackPressed: (() -> Unit)? = null) {
    TopAppBar(
        title = {
            Text(
                title,
                style = TextStyle(
                    fontFamily = appFontFamily,
                    fontSize = 24.sp,
                    fontWeight = FontWeight(600)
                )
            )
        },
        navigationIcon = {
            if (onBackPressed != null) {
                IconButton(onClick = { onBackPressed() }) {
                    Icon(
                        painterResource(id = drawable.ic_topbar_back),
                        contentDescription = null
                    )
                }
            }
        },
        backgroundColor = Color.White,
        elevation = 0.dp,
        contentColor = MaterialTheme.colors.primary
    )
}

当前代码运行时存在问题：当传入null回调时，仍会渲染空白占位，仿佛为navigationIcon预留了空间。希望实现当onBackPressed参数为null时，等同于将TopAppBar的navigationIcon设为null。

解决方案 #

核心问题是原代码中无论onBackPressed是否为null，都给navigationIcon传递了一个lambda（哪怕lambda内部啥也不渲染），TopAppBar会默认给这个导航区域预留空间。正确的做法是根据onBackPressed是否为null，直接决定给navigationIcon传lambda还是null：

修改后的代码：

@Composable
fun CustomBar(title: String, onBackPressed: (() -> Unit)? = null) {
    TopAppBar(
        title = {
            Text(
                title,
                style = TextStyle(
                    fontFamily = appFontFamily,
                    fontSize = 24.sp,
                    fontWeight = FontWeight(600)
                )
            )
        },
        navigationIcon = if (onBackPressed != null) {
            {
                IconButton(onClick = onBackPressed) {
                    Icon(
                        painterResource(id = drawable.ic_topbar_back),
                        contentDescription = "返回" // 建议添加内容描述，提升无障碍体验
                    )
                }
            }
        } else {
            null
        },
        backgroundColor = Color.White,
        elevation = 0.dp,
        contentColor = MaterialTheme.colors.primary
    )
}

说明 #

• 当onBackPressed不为null时，传递包含返回图标的lambda给navigationIcon，正常显示返回按钮
• 当onBackPressed为null时，直接将navigationIcon设为null，TopAppBar不会渲染导航图标区域，标题会自动左对齐，消除空白占位

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