Jetpack Compose BottomNavigation底部窗口内边距适配问题求助

问题场景 #

使用edge-to-edge布局的Scaffold时，直接给BottomNavigation添加modifier.navigationBarsPadding()会导致组件底部出现空白，背景无法延伸到底部安全区，无法实现背景铺满底部、仅导航内容避开安全区的预期效果。

核心思路 #

默认的navigationBarsPadding()会给整个BottomNavigation组件添加内边距，截断背景显示。我们需要让BottomNavigation背景填充到底部安全区，仅让内部导航项（图标、文字）避开安全区。

具体实现方案 #

方案1：给导航项单独添加底部内边距 #

移除BottomNavigation上的navigationBarsPadding()，获取底部安全区高度后，给每个BottomNavigationBarItem单独添加底部padding：

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.BottomNavigation
import androidx.compose.material3.BottomNavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.navigationBars

@Composable
fun BottomNavigationBar(
    items: List<NavigationItem>,
    selectedItem: NavigationItem?,
    onSelectedItemChange: (NavigationItem) -> Unit
) {
    BottomNavigation(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = // 设置你的BottomNavigation背景色
    ) {
        // 获取底部安全区高度
        val bottomInset = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
        
        items.forEach { item ->
            BottomNavigationBarItem(
                item = item,
                isSelected = selectedItem?.route == item.route,
                onSelectedChange = { onSelectedItemChange(item) },
                // 给每个导航项添加底部内边距，避开安全区
                modifier = Modifier.padding(bottom = bottomInset)
            )
        }
    }
}

方案2：背景延伸+内容整体内边距 #

让BottomNavigation背景铺满底部安全区，同时给整个内容区域添加内边距，确保内容不被遮挡：

import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.navigationBars
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material3.BottomNavigation
import androidx.compose.material3.BottomNavigationBarItem
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun BottomNavigationBar(
    items: List<NavigationItem>,
    selectedItem: NavigationItem?,
    onSelectedItemChange: (NavigationItem) -> Unit
) {
    BottomNavigation(
        modifier = Modifier
            .fillMaxWidth()
            // 仅添加水平方向导航栏内边距，避免左右内容被截断
            .windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal))
            // 添加底部安全区高度的padding，确保整体内容避开安全区
            .padding(bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()),
        backgroundColor = // 设置你的BottomNavigation背景色
    ) {
        items.forEach { item ->
            BottomNavigationBarItem(
                item = item,
                isSelected = selectedItem?.route == item.route,
                onSelectedChange = { onSelectedItemChange(item) }
            )
        }
    }
}

额外注意事项 #

确保已在Activity中开启edge-to-edge模式，否则上述适配不会生效：

import androidx.core.view.WindowCompat

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 开启edge-to-edge布局
        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContent {
            // 你的Compose内容
        }
    }
}

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