如何在 BottomBar jetpack compose 中删除选定的椭圆项目颜色

Question

I want to remove the blue oval color behind the selected item. How can I do that?

 NavigationBarItem(
        selected = selected,
        onClick = onClick,
        icon = if (selected) selectedIcon else icon,
        modifier = modifier,
        enabled = enabled,
        label = label,
        alwaysShowLabel = alwaysShowLabel,
        colors = NavigationBarItemDefaults.colors(
            selectedIconColor = AppDefaults.navigationSelectedItemColor(),
            unselectedIconColor = AppDefaults.navigationContentColor(),
            selectedTextColor = AppDefaults.navigationSelectedItemColor(),
            unselectedTextColor = AppDefaults.navigationContentColor(),
            indicatorColor = AppDefaults.navigationIndicatorColor()
        )
    )

Answer 1

The color of the indicator is defined by the indicatorColor attribute in the NavigationBarItem .
To remove it you have to apply the same containerColor used by the NavigationBar .

If you are using the default ( containerColor = surface color) you have to calculate the surface tonal color at different elevation applied to the containerColor .

Something like:

NavigationBarItem(
    icon = { androidx.compose.material3.Icon(Icons.Filled.Favorite, contentDescription = item) },
    label = { androidx.compose.material3.Text(item) },
    selected = selectedItem == index,
    onClick = { selectedItem = index },
    colors = androidx.compose.material3.NavigationBarItemDefaults
        .colors(
            selectedIconColor = Red,
            indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(LocalAbsoluteTonalElevation.current) 
        )
)

In the other cases just use the same color:

NavigationBar(
    containerColor = Yellow
){

    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { androidx.compose.material3.Icon(Icons.Filled.Favorite, contentDescription = item) },
            label = { androidx.compose.material3.Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index },
            colors = androidx.compose.material3.NavigationBarItemDefaults
                .colors(
                    selectedIconColor = Red,
                    indicatorColor = Yellow )
        )
    }
}