Material Design 3导航栏无法像Google Play一样居中元素，如何解决？

你使用Material 3和Jetpack Compose构建的底部导航栏，整体功能正常，但图标对齐效果和Google Play应用存在差异：对比图中，上方为Google Play的导航栏（图标靠上、文字靠下，选中时图标有轻微上移），下方为你的实现效果（图标与文字整体垂直居中）。以下是调整到一致效果的具体方案：

关键修改点 #

• 调整NavigationBarItem的垂直内边距，让图标上移、文字靠下
• 选中时微调图标位置，增强选中反馈
• 优化文字大小，匹配Google Play的视觉层级

修改后的完整代码 #

BottomNavScreen 代码 #

@Composable
fun BottomNavScreen(
    navController: NavHostController,
    modifier: Modifier = Modifier
) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination
    val selectionMap = remember(currentDestination) {
        tabItems.associateWith { tabItem ->
            (currentDestination?.hierarchy?.any { it.route == tabItem.route } == true)
        }
    }

    NavigationBar(modifier = modifier) {
        tabItems.forEach { tabItem ->
            val selected = selectionMap.getOrDefault(tabItem, false)
            NavigationBarItem(
                selected = selected,
                onClick = { navigate(navController, tabItem.route) },
                // 调整垂直内边距，选中时缩小顶部padding，让图标更靠上
                verticalPadding = if (selected) 4.dp else 8.dp,
                icon = {
                    val icon = if (selected) {
                        tabItem.selectedIcon
                    } else {
                        tabItem.unselectedIcon
                    }
                    Icon(
                        imageVector = icon,
                        contentDescription = null,
                        // 选中时图标轻微上移，强化选中视觉效果
                        modifier = Modifier.offset(y = if (selected) (-2).dp else 0.dp)
                    )
                },
                label = {
                    val textWeight = if (selected) {
                        FontWeight.Bold
                    } else {
                        FontWeight.Medium
                    }
                    Text(
                        text = stringResource(tabItem.iconTextId),
                        fontWeight = textWeight,
                        // 未选中时缩小文字尺寸，匹配Google Play的视觉层级
                        fontSize = if (selected) 14.sp else 12.sp
                    )
                }
            )
        }
    }
}

导航栏放置代码（无需修改） #

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    Scaffold(bottomBar = { BottomNavScreen(navController) }) { paddingValues ->
        Column(modifier = Modifier.padding(paddingValues)) {
            NavGraph(navController)
        }
    }
}

效果说明 #

• 未选中状态：图标靠上排列，文字尺寸更小且靠下，和Google Play的布局完全匹配
• 选中状态：图标轻微上移，文字放大加粗，同时顶部内边距缩小，强化选中时的视觉聚焦效果

内容的提问来源于stack exchange，提问作者Денис Попков