Jetpack编写导航栏项目图标

我在Jetpack Compose中使用NavigationBar并为每个项目定义图标,其中选定的项目应显示一个填充的图标,未选定的项目则应显示默认图标。但是,即使未选择项目,也始终应用所选图标。

以下是我的实现:

@Composable
fun MyNavBar() {
    var selectedItemIndex by rememberSaveable { mutableIntStateOf(0) }
    val itemsBarList = listOf(
        BottomNavigationItem(
            selectedIcon = Icons.Filled.Group,
            unselectedIcon = Icons.Default.Group,
        ),
        BottomNavigationItem(
            selectedIcon = Icons.Filled.Person,
            unselectedIcon = Icons.Default.Person,
        ),
        BottomNavigationItem(
            selectedIcon = Icons.Filled.Settings,
            unselectedIcon = Icons.Default.Settings,
        ),
    )

    NavigationBar {
        itemsBarList.forEachIndexed { index, item ->
            Log.i("HomePager", "index: $index , selectedItemIndex: $selectedItemIndex")
            NavigationBarItem(
                selected = index == selectedItemIndex,
                onClick = {
                    selectedItemIndex = index
                },
                icon = {
                    Icon(
                        imageVector = if (index == selectedItemIndex) item.selectedIcon else item.unselectedIcon,
                        contentDescription = "",
                    )
                },
                alwaysShowLabel = true,
            )
        }
    }
}

BottomNavigationItem数据类定义为:

data class BottomNavigationItem(
    val selectedIcon: ImageVector,
    val unselectedIcon: ImageVector,
)

每当我选择一个新项目时,selectedItemIndex都会正确更新,但索引变量似乎总是以2结尾。因此,所选图标将应用于所有项目,而不仅仅是所选项目。

日志:

//here, i selected friends (index 0 on the list)
I  index: 0 , selectedItemIndex: 0
I  index: 1 , selectedItemIndex: 0
I  index: 2 , selectedItemIndex: 0
//changed to profile (index 1 on the list)
I  index: 0 , selectedItemIndex: 1
I  index: 1 , selectedItemIndex: 1
I  index: 2 , selectedItemIndex: 1

即使selectedItemIndex是正确的,索引似乎总是以2结尾,影响所有项目及其各自的图标,我不知道为什么会发生这种情况。如有任何帮助,不胜感激。谢谢!

编辑:此导航栏与寻呼机一起使用,允许用户通过点击底部导航项或左右滑动进行导航。然而,由于这个问题似乎与项目的索引方式有关,并且无论我是通过导航栏选择项目还是在寻呼机中滑动,都会发生这个问题,因此我最初没有在代码段中包含寻呼机。正如论坛指南所建议的那样 minimal reproducible example ,我只关注导航栏,因为它本身显然就足以重现这个问题。