Jetpack Compose 中的 Material3 导航栏出现错误波纹

Question

当我在 Jetpack Compose 中使用 Material3 NavigationBar 时，我得到了错误的矩形波纹效果，如下所示：

Material3 库版本：1.0.0-alpha06 代码：

NavigationBar(modifier = Modifier.navigationBarsPadding()) {
                NavigationBarItem(
                    selected = ...,
                    onClick = {
                        navController.navigate(ScreenComponents(context).mainScreen) {
                            launchSingleTop = true
                        }
                    },
                    icon = {
                        ...
                    },
                    alwaysShowLabel = false,
                    label = {
                        Text(text = ..., color = MaterialTheme.colorScheme.onSurface)
                    }
                )
                // ...

Answer 1

这不是一个错误。它遵循材料指南。

Answer 2

自从 @Gabriele Mariotti 的答案以来，他们似乎已经更改了指导图像，现在波纹只出现在“药丸”上。

有一种简单的方法可以完全禁用波纹，但不能将其隔离到药丸上。希望他们在 M3 可组合项退出 alpha 之前更新此内容。

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Transparent

    @Composable
    override fun rippleAlpha() = RippleAlpha(0F, 0F, 0F, 0F)
}

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
        NavigationBar {
            ...

Answer 3

在 NavigationBarItem 中，我使用此修改器来更改波纹的形状

modifier = Modifier
    .padding(4.dp)
    .background(MaterialTheme.colorScheme.background, RoundedCornerShape(24.dp))
    .clip(RoundedCornerShape(24.dp))

Answer 4

我设法通过指定自定义交互源来消除对药丸的连锁反应：

private object NoRippleInteractionSource : MutableInteractionSource {

    override val interactions: Flow<Interaction> = emptyFlow()

    override suspend fun emit(interaction: Interaction) {}

    override fun tryEmit(interaction: Interaction) = true
}

并将此交互源作为参数传递：

NavigationBarItem(
    interactionSource = NoRippleInteractionSource,
    selected = isSelected,
    onClick = onClick,
    ...
)