更改底部导航图标颜色（或）图标，点击撰写中的底部项目视图

Question

The Question is regarding the Compose Bottom Navigation,

• I have created the bottom navigation view with NavHost
• I need to change the Icon state as (Enable/Disable) while clicking on it each time like changing the Icon or Icon colour itself

Answer 1

As you said you implement navigation already . so now you have to check current route and and bottom navigation screen route

val currentRoute = backStackEntry.value?.destination?.route; //check current route
        val selected = currentRoute == screens.route // if current route equal to screen route it return true

give icon color acc to selected route like this

  Icon(
                        imageVector = screens.icon,
                        contentDescription = "",
                        tint = if (selected) Color.White else Color.Black
                    )

here is full Bottom Navigation Bar implementation

@Composable

fun BottomBar(
    modifier: Modifier = Modifier,
    screens: List<ScreenModel.HomeScreens>,
    navController: NavController,

    ) {
    BottomNavigation {
        val backStackEntry = navController.currentBackStackEntryAsState()
        screens.forEach {


                screens ->
            val currentRoute = backStackEntry.value?.destination?.route;
            val selected = currentRoute == screens.route

            BottomNavigationItem(
                icon = {
                    Icon(
                        imageVector = screens.icon,
                        contentDescription = "",
                        tint = if (selected) Color.White else Color.Black
                    )
                },
                selected = selected,
                label = {
                    Text(
                        if (selected) screens.title else "", // Label
                        fontWeight = FontWeight.SemiBold,
                        color = Color.White
                    )
                },

                onClick = {
                    if (currentRoute != screens.route) {
                        navController.navigate(screens.route)

                    }

                }

            )
        }

    }

}

screen model file

class ScreenModel {

    sealed class HomeScreens(
        val route: String,
        val title: String,
        val icon: ImageVector
    ) {
        object Home : HomeScreens("home", "Home", Icons.Filled.Home)
        object Search : HomeScreens("search", "Search", Icons.Filled.Search)
        object Profile : HomeScreens("profile", "MyNetwork", Icons.Filled.Person)

    }

    val screensInHomeFromBottomNav = listOf(
        HomeScreens.Home, HomeScreens.Search, HomeScreens.Profile
    )

}