SwipeToDismissBox
Composable Component
A composable that can be dismissed by swiping left or right.
Common
@Composable
fun SwipeToDismissBox(
state: SwipeToDismissBoxState,
backgroundContent: @Composable RowScope.() -> Unit,
modifier: Modifier = Modifier,
enableDismissFromStartToEnd: Boolean = true,
enableDismissFromEndToStart: Boolean = true,
gesturesEnabled: Boolean = true,
onDismiss: suspend (SwipeToDismissBoxValue) -> Unit = {},
content: @Composable RowScope.() -> Unit,
)
Parameters
state | The state of this component. |
backgroundContent | A composable that is stacked behind the content and is exposed when the content is swiped. You can/should use the state to have different backgrounds on each side. |
modifier | Optional Modifier for this component. |
enableDismissFromStartToEnd | Whether SwipeToDismissBox can be dismissed from start to end. |
enableDismissFromEndToStart | Whether SwipeToDismissBox can be dismissed from end to start. |
gesturesEnabled | Whether swipe-to-dismiss can be interacted by gestures. |
onDismiss | Optional callback to be called when content is dismissed. onDismissed provides the current dismissed direction. |
content | The content that can be dismissed. |
Common
Deprecated Maintained for binary compatibility. Use updated signature with onDismissed parameter.
@Composable
fun SwipeToDismissBox(
state: SwipeToDismissBoxState,
backgroundContent: @Composable RowScope.() -> Unit,
modifier: Modifier = Modifier,
enableDismissFromStartToEnd: Boolean = true,
enableDismissFromEndToStart: Boolean = true,
gesturesEnabled: Boolean = true,
content: @Composable RowScope.() -> Unit,
) =
SwipeToDismissBox(
state = state,
backgroundContent = backgroundContent,
modifier = modifier,
enableDismissFromStartToEnd = enableDismissFromStartToEnd,
enableDismissFromEndToStart = enableDismissFromEndToStart,
gesturesEnabled = gesturesEnabled,
onDismiss = {},
content = content,
)
Code Examples
SwipeToDismissListItems
@Preview
@Composable
fun SwipeToDismissListItems() {
val dismissState = rememberSwipeToDismissBoxState()
var isVisible by remember { mutableStateOf(true) }
if (isVisible) {
SwipeToDismissBox(
state = dismissState,
backgroundContent = {
val color by
animateColorAsState(
when (dismissState.targetValue) {
SwipeToDismissBoxValue.Settled -> Color.LightGray
SwipeToDismissBoxValue.StartToEnd -> Color.Green
SwipeToDismissBoxValue.EndToStart -> Color.Red
}
)
Box(Modifier.fillMaxSize().background(color))
},
onDismiss = { direction ->
if (direction == SwipeToDismissBoxValue.EndToStart) {
isVisible = false
} else {
dismissState.reset()
}
},
) {
OutlinedCard(shape = RectangleShape) {
ListItem(
headlineContent = { Text("Cupcake") },
supportingContent = { Text("Swipe me left or right!") },
)
}
}
}
}