如何减少Material 3 NavigationBar的内边距以缩小其高度

解决方案 #

Material 3 官方的NavigationBar默认自带硬编码的上下内边距、最小高度约束，NavigationBarItem内部也固定了图标和标签的上下间距，所以仅修改外层高度或单改图标大小会出现内容裁剪、位置偏移的问题，可按以下两种方案调整：

方案1：基于官方组件适配

1. 先调整NavigationBar基础配置，设置自定义高度，移除默认冗余内边距：

NavigationBar(
    containerColor = elevation01,
    // 自定义底部导航高度，可根据需求调整数值，Gmail同款窄栏高度通常在56-62dp之间
    modifier = Modifier.height(60.dp),
    // 移除官方默认的上下内边距
    contentPadding = PaddingValues(vertical = 0.dp),
    // 取消适配系统导航栏的垂直边距，避免额外增加高度，低版本可直接设为WindowInsets(0,0,0,0)
    windowInsets = NavigationBarDefaults.windowInsets.exclude(WindowInsetsSides.Vertical)
) {
    // 原有NavigationBarItem遍历逻辑不变
}

2. 调整NavigationBarItem内部元素间距，缩减多余空隙：

NavigationBarItem(
    // 原有selected、onClick、colors参数保持不变
    label = {
        Text(
            text = stringResource(id = item.title),
            fontSize = 11.sp,
            // 缩小文字上下间距
            modifier = Modifier.padding(top = 1.dp, bottom = 0.dp)
        )
    },
    icon = {
        Icon(
            imageVector = if (currentRoute == item.route) item.selectedIcon else item.unselectedIcon,
            contentDescription = null,
            tint = if (currentRoute == item.route) Color.Black else Color.Unspecified,
            // 缩小图标尺寸，取消默认上下内边距
            modifier = Modifier.size(22.dp).padding(0.dp)
        )
    },
    // 让item内容垂直居中，避免偏移
    modifier = Modifier.align(Alignment.CenterVertically)
)

方案2：自定义底部导航（灵活度最高，无官方硬编码约束）

如果调整官方组件还是达不到预期效果，直接用Row+Column自定义实现，高度、间距完全可控：

@Composable
fun MyAppBottomBar(navController: NavController, tabs: Array<MenuBottom>) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route ?: MenuBottom.INICIO.route
    val rutas = remember { MenuBottom.values().map { it.route } }
    if (currentRoute in rutas) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(56.dp) // 高度完全自定义
                .background(elevation01),
            horizontalArrangement = Arrangement.SpaceAround,
            verticalAlignment = Alignment.CenterVertically
        ) {
            tabs.forEach { item ->
                val isSelected = currentRoute == item.route
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .clickable {
                            if (item.route != currentRoute) {
                                navController.navigate(item.route) {
                                    popUpTo(navController.graph.startDestinationId) {
                                        saveState = true
                                    }
                                    launchSingleTop = true
                                    restoreState = true
                                }
                            }
                        }
                        .padding(vertical = 4.dp)
                ) {
                    Icon(
                        imageVector = if (isSelected) item.selectedIcon else item.unselectedIcon,
                        contentDescription = null,
                        tint = if (isSelected) Color.Black else Color.Unspecified,
                        modifier = Modifier.size(22.dp)
                    )
                    Text(
                        text = stringResource(id = item.title),
                        fontSize = 11.sp,
                        color = Color.Black,
                        modifier = Modifier.padding(top = 2.dp)
                    )
                    // 选中指示器，和原有效果对齐
                    if (isSelected) {
                        Spacer(modifier = Modifier.height(2.dp))
                        Box(
                            modifier = Modifier
                                .width(20.dp)
                                .height(2.dp)
                                .background(Greenyellow, RoundedCornerShape(1.dp))
                        )
                    }
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Juan Domínguez