Jetpack Compose横屏模式下navigationBarPadding异常问题排查

核心原因 #

1. API作用与使用位置不匹配
   navigationBarsPadding()的设计目标是给页面/容器级组件添加内边距，避免内容被系统导航栏遮挡。但你把它用在了每个固定size(60.dp)的子Box上，横屏时系统导航栏的位置（可能从底部切换到侧边）或内边距数值会发生变化，这些额外的padding会直接挤压Box内部的可用空间——因为Box尺寸固定，内部的Icon和Text只能缩小适配剩余空间，最终出现图标缩小、布局错位的问题。
2. 重复添加padding导致空间过度挤压
   每个子Box都单独调用navigationBarsPadding()，意味着每个元素都会获取并应用系统导航栏的padding值，叠加后进一步压缩了内容的展示空间。

修复方案 #

将navigationBarsPadding()移到导航栏的外层容器上，确保整个导航栏整体避开系统导航栏，内部子元素不受额外padding影响，保持原有尺寸。

修改后的代码示例 #

Box(Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
    Row(
        Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .navigationBarsPadding() // 移到外层Row容器
            .background(MaterialTheme.colorScheme.onBackground),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            Modifier
                .size(60.dp)
                .padding(8.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(color = MaterialTheme.colorScheme.onPrimaryContainer)
                .padding(4.dp),
            contentAlignment = Alignment.Center
        ) {
            Column(
                Modifier.wrapContentSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    painter = painterResource(R.drawable.home),
                    contentDescription = "home",
                    tint = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier.size(28.dp)
                )
                Text(
                    "Home", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onPrimary
                )
            }
        }

        Box(
            Modifier
                .size(60.dp)
                .padding(8.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(color = MaterialTheme.colorScheme.onPrimaryContainer)
                .padding(4.dp),
            contentAlignment = Alignment.Center
        ) {
            Column(
                Modifier.wrapContentSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    painter = painterResource(R.drawable.info),
                    contentDescription = "Info",
                    tint = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier.size(28.dp)
                )
                Text(
                    "Info", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onPrimary
                )
            }
        }
    }
}

额外说明 #

如果需要更精细的控制（比如仅针对底部导航栏添加padding），可以使用navigationBarPadding()（单数，仅适配底部导航栏）替代navigationBarsPadding()（复数，适配所有位置的导航栏），避免侧边导航栏的padding影响布局。

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