Jetpack Compose：移除BottomAppBar选中项背景色及切换图标方法

一、移除选中项的椭圆形背景 #

默认的BottomNavigationItem会自带选中状态的椭圆形指示器，你之前用的setBackgroundColor是View系统的方法，在Compose里不适用。要移除这个椭圆背景，直接把indicator参数设为空的Composable即可：

BottomNavigationItem(
    selected = selectedItem == item,
    onClick = { selectedItem = item },
    icon = { /* 图标区域 */ },
    label = { /* 标签区域 */ },
    // 关键配置：空指示器移除默认椭圆背景
    indicator = {}
)

如果需要自定义选中背景（比如完全透明或其他样式），也可以在indicator里写自定义逻辑：

indicator = {
    // 完全透明的占位，等同于移除默认效果
    Box(modifier = Modifier.size(0.dp))
}

二、根据选中状态切换图标 #

直接在icon参数里根据selected状态判断显示不同图标即可，示例如下：

BottomNavigationItem(
    selected = selectedItem == Home,
    onClick = { selectedItem = Home },
    icon = {
        Icon(
            imageVector = if (selectedItem == Home) Icons.Filled.Home else Icons.Outlined.Home,
            contentDescription = "首页"
        )
    },
    label = { Text("首页") },
    indicator = {} // 配合移除默认背景
)

完整示例代码 #

@Composable
fun CustomBottomAppBar() {
    val navItems = listOf("首页", "消息", "我的")
    val selectedIndex = remember { mutableStateOf(0) }

    BottomAppBar {
        navItems.forEachIndexed { index, title ->
            BottomNavigationItem(
                selected = selectedIndex.value == index,
                onClick = { selectedIndex.value = index },
                icon = {
                    // 根据选中状态切换图标
                    val targetIcon = if (selectedIndex.value == index) {
                        when(index) {
                            0 -> Icons.Filled.Home
                            1 -> Icons.Filled.Message
                            2 -> Icons.Filled.Person
                            else -> Icons.Filled.Home
                        }
                    } else {
                        when(index) {
                            0 -> Icons.Outlined.Home
                            1 -> Icons.Outlined.Message
                            2 -> Icons.Outlined.Person
                            else -> Icons.Outlined.Home
                        }
                    }
                    Icon(imageVector = targetIcon, contentDescription = title)
                },
                label = { Text(title) },
                indicator = {}, // 移除默认椭圆背景
                // 可选：自定义选中/未选中的文字、图标颜色
                selectedContentColor = Color.Blue,
                unselectedContentColor = Color.Gray
            )
        }
    }
}

注意事项 #

• Compose组件样式需通过自身参数配置，不要混用View系统的setBackgroundColor这类方法。
• selectedContentColor和unselectedContentColor可快速设置选中/未选中状态下的图标、文字颜色，无需单独给图标和文字加颜色判断。

内容的提问来源于stack exchange，提问作者Manjee