Compose底部导航选中时先显未选中颜色再切选中颜色问题

方法一：直接控制图标/文本颜色 #

跳过BottomNavigationItem内部的颜色过渡逻辑，直接给Icon（或文本）根据选中状态设置固定颜色，点击切换时颜色会立刻变化：

BottomNavigation(
    backgroundColor = backgroundColor,
) {
    tabs.forEach { item ->
        BottomNavigationItem(
            selected = item.selected,
            onClick = item::onClick,
            icon = {
                Icon(
                    modifier = Modifier.disabledOpacity(item.enabled),
                    imageVector = getIconAsset(item),
                    // 直接根据选中+启用状态设置颜色
                    tint = if (item.selected && item.enabled) Color.Red else Color.Blue
                )
            },
            enabled = item.enabled,
            // 若有文字标签，同样直接设置颜色
            label = {
                Text(
                    text = item.title,
                    color = if (item.selected && item.enabled) Color.Red else Color.Blue
                )
            }
        )
    }
}

方法二：自定义过渡逻辑替换默认动画 #

如果想保留BottomNavigationItem的原有样式逻辑，仅移除颜色过渡，可以自己实现过渡逻辑，用瞬时动画替代默认的300ms过渡：

第一步：自定义无过渡的导航项组件 #

@Composable
fun NoTransitionBottomNavigationItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    enabled: Boolean = true,
    selectedColor: Color,
    unselectedColor: Color,
    label: @Composable (() -> Unit)? = null
) {
    // 使用snap()让动画瞬间完成，无过渡效果
    val animationProgress by animateFloatAsState(
        targetValue = if (selected) 1f else 0f,
        animationSpec = snap()
    )

    val color = if (selected) selectedColor else unselectedColor

    CompositionLocalProvider(
        LocalContentColor provides color,
        LocalContentAlpha provides if (enabled) 1f else 0.38f
    ) {
        BottomNavigationItem(
            selected = selected,
            onClick = onClick,
            icon = icon,
            label = label,
            enabled = enabled,
            selectedContentColor = color,
            unselectedContentColor = color
        )
    }
}

第二步：替换原生组件使用 #

BottomNavigation(
    backgroundColor = backgroundColor,
) {
    tabs.forEach { item ->
        NoTransitionBottomNavigationItem(
            selected = item.selected,
            onClick = item::onClick,
            selectedColor = Color.Red,
            unselectedColor = Color.Blue,
            enabled = item.enabled,
            icon = {
                Icon(
                    modifier = Modifier.disabledOpacity(item.enabled),
                    imageVector = getIconAsset(item),
                )
            }
        )
    }
}

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