Android Jetpack Compose BottomAppBar设56dp时图标与标签重叠问题求助

当你将BottomAppBar高度固定为56dp时，图标和标签出现重叠，核心原因是默认NavigationBarItem的内部布局（图标+标签）加上你设置的30dp图标尺寸，总高度超过了56dp的限制。以下是几个可行的解决方法：

方法一：自定义Column布局替代默认NavigationBarItem #

直接用Column构建底部导航项，完全控制图标和标签的间距与尺寸，适配56dp高度：

BottomAppBar(
    modifier = Modifier.height(56.dp),
) {
    bottomNavigationItems.forEach { item ->
        Column(
            modifier = Modifier
                .weight(1f)
                .clickable { /* 补充你的跳转逻辑 */ }
                .fillMaxHeight()
                .padding(vertical = 4.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceEvenly
        ) {
            Icon(
                modifier = Modifier.size(24.dp), // 缩小图标至默认适配尺寸
                imageVector = item.icon,
                contentDescription = item.name,
                tint = if (currentRoute == item.route) Color.White else /* 设置未选中状态的图标颜色 */
            )
            Text(
                text = item.name,
                fontSize = 10.sp,
                color = if (currentRoute == item.route) Color.White else /* 设置未选中状态的文字颜色 */
            )
        }
    }
}

通过SpaceEvenly垂直分配空间，加上上下padding，确保图标和标签不会挤压重叠。

方法二：调整默认NavigationBarItem的内部间距与图标尺寸 #

在原有的NavigationBarItem基础上，缩小图标尺寸并给图标、标签添加间距：

BottomAppBar(
    modifier = Modifier.height(56.dp),
) {
    bottomNavigationItems.forEach { item ->
        NavigationBarItem(
            modifier = Modifier.weight(1f),
            selected = currentRoute == item.route,
            onClick = { /* 补充你的跳转逻辑 */ },
            label = {
                Text(
                    text = item.name,
                    fontSize = 10.sp,
                    modifier = Modifier.padding(top = 2.dp) // 标签顶部添加上间距
                )
            },
            alwaysShowLabel = true,
            icon = {
                Icon(
                    modifier = Modifier
                        .size(28.dp) // 适当缩小图标尺寸
                        .padding(bottom = 2.dp), // 图标底部添加下间距
                    imageVector = item.icon,
                    contentDescription = item.name
                )
            },
            colors = NavigationBarItemDefaults.colors(
                unselectedIconColor = Color.White,
                indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
                    LocalAbsoluteTonalElevation.current
                ),
                selectedTextColor = Color.White,
                selectedIconColor = Color.White
            )
        )
    }
}

注意明确colors的命名参数，避免参数顺序导致的样式错误。

方法三：移除固定高度（推荐如果不需要强制56dp） #

如果没有必须固定56dp的需求，直接删除modifier = Modifier.height(56.dp)，BottomAppBar会根据内部内容自动计算合适的高度，从根源避免重叠问题。

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