如何使用 Material 3 更改 Jetpack Compose 中导航栏的高度？

Question

我想使用 Jetpack Compose 更改 Material 3 导航栏的默认高度。

我尝试使用 Modifier.height 更改导航栏高度，但它有限制并且图标与文本发生碰撞。

这是我的代码：

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            NavigationBar(
                containerColor = MainWhite
            ) {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination

                listOfNavItems.forEach { navItem ->
                    val selected =
                        currentDestination?.hierarchy?.any { it.route == navItem.route } == true

                    NavigationBarItem(
                        selected = selected,
                        onClick = {
                            navController.navigate(navItem.route) {
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        },
                        icon = {
                            Icon(
                                if (selected) navItem.filledIcon else navItem.outlinedIcon,
                                contentDescription = navItem.description,
                                modifier = Modifier.size(30.dp),
                            )

                        },
                        label = {
                            Text(
                                text = navItem.label,
                                style = MaterialTheme.typography.bodyLarge,
                                fontSize = 12.sp,
                                fontWeight = FontWeight.SemiBold,
                            )
                        },
                        colors = NavigationBarItemDefaults.colors(
                            selectedIconColor = MainTurquoise,
                            selectedTextColor = MainTurquoise,
                            indicatorColor = MainWhite,
                            unselectedIconColor = MainGrey,
                            unselectedTextColor = MainGrey,
                            disabledIconColor = Color.Black,
                            disabledTextColor = Color.Black
                        )
                    )
                }
            }
        }
    ) { paddingValues ->
        NavHost(
            navController = navController,
            startDestination = Screen.HomeScreen.route,
            enterTransition = {
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.Start,
                    tween(100)
                )
            },
            exitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.Start,
                    tween(100)
                )
            },
            popEnterTransition = {
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.End,
                    tween(100)
                )
            },
            popExitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.End,
                    tween(100)
                )
            },
            modifier = Modifier.padding(paddingValues)
        ) {
            composable(route = Screen.HomeScreen.route) {
                MainScreen()
            }
            composable(route = Screen.NewPostScreen.route) {
                NewPostScreen()
            }
            composable(route = Screen.InboxScreen.route) {
                InboxScreen()
            }
            composable(route = Screen.AccountScreen.route) {
                AccountScreen()
            }
        }
    }
}

我不知道如何更改导航栏的高度。按照https://m3.material.io/components/navigation-bar/overview我们可以看到容器变高了，但没有具体说明如何使其变短。

Answer 1

您可以为高度添加这样的修饰符

  NavigationBar(
                    containerColor = MainWhite,
                    modifier = Modifier.height(65.dp) 
                ) {}