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

在NavigationBarItem中我使用这个修改器来改变波纹的形状

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

Answer 2

这不是错误。它遵循 material guidelines.

Answer 3

自从@Gabriele Mariotti 的以来，他们似乎已经更改了指南图像，现在波纹仅出现在 'pill'。

有一种简单的方法可以完全禁用纹波，但不能将其隔离到药丸上。希望他们在 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 {
            ...

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

Wrong ripple in material3 NavigationBar in Jetpack Composee

android

android-navigation-bar

android-jetpack-compose