如何在任何Jetpack撰写视图上禁用涟漪效应?

Question

在Jetpack Compose，如何删除(或改变形状)涟漪效应时，点击一个项目?

这是材料设计3中NavigationBar的示例

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")
NavigationBar {
items.forEachIndexed { index, item ->
NavigationBarItem(
icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
label = { Text(item) },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}

尝试用

添加Modifier

modifier = Modifier.clickable(interactionSource = interactionSource,indication = null){}

在NavigationBar和NavigationBarItem上都不起作用。

Answer 1

您可以通过提供LocalRippleTheme来实现。CompositionLocalProvidercontent中的所有视图都没有波纹

CompositionLocalProvider(
LocalRippleTheme provides ClearRippleTheme
) {
NavigationBar {
items.forEachIndexed { index, item ->
NavigationBarItem(
icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
label = { Text(item) },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}
}

ClearRippleTheme:

object ClearRippleTheme : RippleTheme {
@Composable
override fun defaultColor(): Color = Color.Transparent
@Composable
override fun rippleAlpha() = RippleAlpha(
draggedAlpha = 0.0f,
focusedAlpha = 0.0f,
hoveredAlpha = 0.0f,
pressedAlpha = 0.0f,
)
}