BottomNavigation定制

Question

下午好，我刚开始写Jetpack，我在根据需要定制BottomNavigation时遇到了一些困难。我目前的结果是：

当前结果

我想这样：

预期结果

在我看来，这篇文章并没有采用我给它的风格。它看起来也有一个白色的框作为底部的导航背景，但我不知道它是什么。有谁可以帮我？

下面是我的底部导航代码：

@Composable
fun BottomNavBar(
    backStackEntryState: State<NavBackStackEntry?>,
    navController: NavController,
    bottomNavItems: List<NavigationItem>
) {
    BottomNavigation(
        backgroundColor = DarkGray.copy(alpha = 0.6f),
        modifier = Modifier
            .fillMaxWidth()
            .padding(Dimen10, Dimen20, Dimen10, Dimen20)
            .clip(RoundedCornerShape(Dimen13, Dimen13, Dimen13, Dimen13))
    ) {
        bottomNavItems.forEach { item ->
            val isSelected = item.route == backStackEntryState.value?.destination?.route

            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = item.icon.orZero()),
                        contentDescription = stringResource(id = item.title)
                    )
                },
                label = { Text(text = stringResource(id = item.title), style = Text14) },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White,
                alwaysShowLabel = true,
                selected = isSelected,
                onClick = {
                    navController.navigate(item.route) {
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route = route) {
                                saveState = true
                            }
                        }

                        launchSingleTop = true
                        restoreState = true
                    }
                },
                modifier = if (isSelected) {
                    Modifier.clip(RoundedCornerShape(Dimen13, Dimen13, Dimen13, Dimen13)).background(color = DarkGray).clipToBounds()
                } else {
                    Modifier.background(color = Color.Transparent)
                }
            )
        }
    }
}

编辑：更新当前结果和代码

Answer 1

在您的代码中没有任何主要问题。很可能，fillMaxWidth()和padding()可能是问题所在。

只是做了一些小的改变，你可以尝试->

    BottomNavigation(
        modifier = Modifier.clip(RoundedCornerShape(12.dp)),
        elevation = 0.dp,
        contentColor = Color.White,
        backgroundColor = DarkGray.copy(0.6f)
    ) {
        bottomNavItems.forEach { item ->
            val isSelected = currentRoute == item.route/*Replace with your logic*/

            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_buy_premium),
                        contentDescription = ""
                    )
                },
                label = { Text(text = "Job openings") },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White,
                alwaysShowLabel = true,
                selected = isSelected,
                onClick = {
                    /*viewModel.updateRoute(item.route)
                    viewModel.navigateTo(item.route)*/Your logic here
                },
                modifier = if (isSelected) {
                    Modifier.clip(RoundedCornerShape(25.dp)).background(color = DarkGray).clipToBounds()
                } else {
                    Modifier.background(color = Color.Transparent)
                }
            )
        }
    }

​

​