如何为Jetpack Compose中BottomNavigationItem的图标与标签添加间距？

你遇到的问题是因为BottomNavigationItem内部对icon和label的布局有默认约束，单独修改图标区域的内边距或布局无法影响两者之间的整体间距。这里提供两种可行的解决思路：

方法1：使用customContent完全自定义Item布局 #

直接放弃icon和label参数，改用customContent构建整个导航项的布局，这样可以完全控制图标与标签的间距：

BottomNavigationItem(
    selected = currentRoute == navItem.route,
    onClick = { navController.navigate(navItem.route) },
    customContent = {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp) // 这里设置图标与标签的间距，可按需调整
        ) {
            Box(
                Modifier
                    .width(70.dp)
                    .height(30.dp)
                    .background(
                        colorResource(id = if (currentRoute == navItem.route) R.color.bottom_nav_light else R.color.bottom_nav_dark),
                        RoundedCornerShape(32.dp)
                    ),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    painter = painterResource(id = navItem.icon),
                    contentDescription = navItem.label,
                    tint = colorResource(id = R.color.black)
                )
            }
            Text(
                text = navItem.label,
                fontSize = 14.sp,
                color = colorResource(id = R.color.black)
            )
        }
    },
    alwaysShowLabel = true,
    selectedContentColor = colorResource(id = R.color.black),
    unselectedContentColor = colorResource(id = R.color.black)
)

这种方式的优势是完全掌控布局结构，不仅可以调整间距，还能自由修改其他布局细节。

方法2：给图标Box统一添加底部内边距 #

如果不想完全自定义布局，可以给图标外层的Box添加底部内边距，注意选中和未选中状态都要添加相同的内边距，避免标签位置跳动：

icon = {
    Box(
        Modifier
            .width(70.dp)
            .height(30.dp)
            .padding(bottom = 8.dp) // 统一添加底部间距，可按需调整
            .background(
                colorResource(id = if (currentRoute == navItem.route) R.color.bottom_nav_light else R.color.bottom_nav_dark),
                RoundedCornerShape(32.dp)
            ),
        contentAlignment = Alignment.Center
    ) {
        Icon(
            painter = painterResource(id = navItem.icon),
            contentDescription = navItem.label,
            tint = colorResource(id = R.color.black)
        )
    }
},
label = {
    Text(text = navItem.label, fontSize = 14.sp)
}

这个方法更轻量，适合只需要调整间距的场景。

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