为什么 Material Design 3 导航栏不像 Google Play 那样居中项目

Question

我的应用程序有一个使用 Material 3 和 Jetpack Compose 构建的简单导航栏。总是很好，但导航栏内的图标对齐方式似乎与 Google Play 应用程序中的图标略有不同。

我需要写什么修改器或代码行才能得到像 Google Play 那样的结果？

导航栏：

@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) },
            icon = {
                val icon = if (selected) {
                    tabItem.selectedIcon
                } else {
                    tabItem.unselectedIcon
                }
                Icon(imageVector = icon, contentDescription = null)
            },
            label = {
                val textWeight = if (selected) {
                    FontWeight.Bold
                } else {
                    FontWeight.Medium
                }
                Text(
                    text = stringResource(tabItem.iconTextId),
                    fontWeight = textWeight,
                    fontSize = 14.sp
                )
            }
        )
    }
}
}

我这样放置：

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

我的版本——底图 Google Play — 顶级图片