I'm testing Material Design 3 in a Jetpack Compose project, I am aware that this is an alpha version and there is no specific property for everything yet.
The versions are Compose Material 3 1.0.0-alpha01
and Compose1.1.0-beta01
.
In a NavigationBar
like the following, how to remove (or change the shape of) the ripple effect when clicking on an Item ?
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 }
)
}
}
Trying to add a Modifier
with
modifier = Modifier.clickable(interactionSource = interactionSource,indication = null){}
both on the NavigationBar
and on the NavigationBarItem
, does not work.
You can do it by providing LocalRippleTheme
:
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,
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.