如何缩减Material3 NavigationBar的上下内边距以使其更纤细

Material3 NavigationBar默认的内边距和布局约束会让它显得厚重，直接修改height会导致图标与文字重叠——因为内部的NavigationBarItem也自带固定的间距和padding。以下是可行的调整方案：

核心思路 #

同时调整NavigationBar的整体内边距/高度，以及NavigationBarItem的内部间距，让整个导航栏的布局更紧凑。

完整代码示例 #

NavigationBar(
    modifier = Modifier
        .height(60.dp) // 设置目标高度
        .padding(vertical = 0.dp), // 移除导航栏自身的上下内边距
    windowInsets = WindowInsets(0, 0, 0, 0) // 清除默认窗口内边距
) {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = /* 你的选中状态判断 */,
            onClick = { /* 点击事件逻辑 */ },
            icon = {
                Icon(
                    imageVector = tab.icon,
                    contentDescription = tab.title,
                    modifier = Modifier.size(24.dp) // 可选：缩小图标尺寸
                )
            },
            label = {
                Text(
                    text = tab.title,
                    style = TextStyle(fontSize = 12.sp) // 可选：缩小文字字号
                )
            },
            modifier = Modifier.background(Color.green),
            // 自定义Item样式，压缩内部间距
            style = NavigationBarItemDefaults.itemStyle(
                iconPadding = 2.dp, // 缩小图标与文字的间距
                labelPadding = 0.dp, // 移除文字上下内边距
                minHeight = 56.dp // 匹配导航栏高度，避免布局溢出
            )
        )
    }
}

关键调整点说明 #

• NavigationBar层面：通过padding(vertical = 0.dp)移除自身上下内边距，配合height设置目标高度，同时清除windowInsets避免额外间距。
• NavigationBarItem层面：
  • 用itemStyle调整iconPadding和labelPadding，压缩图标与文字的间距、文字的上下内边距；
  • 设置minHeight匹配导航栏高度，防止内部元素布局异常；
  • 可选缩小图标尺寸和文字字号，进一步提升紧凑感，避免重叠。

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