如何在导航栏组合中切换基线和大纲图标？

Question

所以我想在底部导航中选择时在图标的基线版本和大纲版本之间切换 Material 设计 3，我有这个组成 bottomBar:

NavigationBar {
    items.forEachIndexed{ index, screen ->
        NavigationBarItem(
            icon =  { Icon(painterResource(id = screen.icon), contentDescription = screen.label) },
            label = { Text(screen.label) },
            selected = selectedItem == index,
            onClick = {
                selectedItem = index
                navController.navigate(screen.route){
                    popUpTo(navController.graph.findStartDestination().id)
                    launchSingleTop = true
                    restoreState = true
                }

            }
        )
    }
}

以及这些屏幕对象：

sealed class Screen(val route: String, val label: String, val icon: Int) {
    object Home : Screen("home", "Home", R.drawable.outline_home_black_24)
    object History : Screen("history", "History", R.drawable.outline_history_black_24)
}

选中后如何在R.drawable.outline_home和R.drawable.baseline_home之间切换？

Answer 1

您可以将需要的图像存储在 Screen 中，如下所示：

sealed class Screen(val route: String, val label: String, val icon: Int, val iconSelected: Int) {
    object Home : Screen("home", "Home", R.drawable.outline_home_black_24, R.drawable.baseline_home_black_24)
    object History : Screen("history", "History", R.drawable.outline_history_black_24, R.drawable.baseline_home_black_24)
}

然后select一个图标取决于select离子状态：

icon = {
    Icon(
        painterResource(
            id = if (selectedItem == index) screen.iconSelected else screen.icon
        ),
        contentDescription = screen.label
    )
},

如何在导航栏组合中切换基线和大纲图标？

How to switch baseline and outline icons in navigation bar compose?

android

kotlin

material-design

android-jetpack-compose