{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

SwipeToDismissBoxKt

public final class SwipeToDismissBoxKt


Summary

Public methods

static final void

This method is deprecated. Use SwipeToDismissBox instead

static final void
@Composable
@ExperimentalMaterial3Api
SwipeToDismissBox(
    @NonNull SwipeToDismissBoxState state,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> backgroundContent,
    @NonNull Modifier modifier,
    boolean enableDismissFromStartToEnd,
    boolean enableDismissFromEndToStart,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

A composable that can be dismissed by swiping left or right.

static final @NonNull SwipeToDismissBoxState
@Composable
@ExperimentalMaterial3Api
rememberSwipeToDismissBoxState(
    @NonNull SwipeToDismissBoxValue initialValue,
    @NonNull Function1<@NonNull SwipeToDismissBoxValue, @NonNull Boolean> confirmValueChange,
    @NonNull Function1<@NonNull Float, @NonNull Float> positionalThreshold
)

Create and remember a SwipeToDismissBoxState.

Public methods

SwipeToDismiss

@Composable
@ExperimentalMaterial3Api
public static final void SwipeToDismiss(
    @NonNull SwipeToDismissBoxState state,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> background,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> dismissContent,
    @NonNull Modifier modifier,
    @NonNull Set<@NonNull SwipeToDismissBoxValue> directions
)

A composable that can be dismissed by swiping left or right.

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Card
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.ListItem
import androidx.compose.material3.SwipeToDismissBox
import androidx.compose.material3.SwipeToDismissBoxValue
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSwipeToDismissBoxState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

val dismissState = rememberSwipeToDismissBoxState()
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))
    }
) {
    Card {
        ListItem(
            headlineContent = {
                Text("Cupcake")
            },
            supportingContent = { Text("Swipe me left or right!") }
        )
        HorizontalDivider()
    }
}
Parameters
@NonNull SwipeToDismissBoxState state

The state of this component.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> background

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.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> dismissContent

The content that can be dismissed.

@NonNull Modifier modifier

Optional Modifier for this component.

@NonNull Set<@NonNull SwipeToDismissBoxValue> directions

The set of directions in which the component can be dismissed.

SwipeToDismissBox

@Composable
@ExperimentalMaterial3Api
public static final void SwipeToDismissBox(
    @NonNull SwipeToDismissBoxState state,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> backgroundContent,
    @NonNull Modifier modifier,
    boolean enableDismissFromStartToEnd,
    boolean enableDismissFromEndToStart,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

A composable that can be dismissed by swiping left or right.

import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Card
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.ListItem
import androidx.compose.material3.SwipeToDismissBox
import androidx.compose.material3.SwipeToDismissBoxValue
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSwipeToDismissBoxState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

val dismissState = rememberSwipeToDismissBoxState()
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))
    }
) {
    Card {
        ListItem(
            headlineContent = {
                Text("Cupcake")
            },
            supportingContent = { Text("Swipe me left or right!") }
        )
        HorizontalDivider()
    }
}
Parameters
@NonNull SwipeToDismissBoxState state

The state of this component.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> 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.

@NonNull Modifier modifier

Optional Modifier for this component.

boolean enableDismissFromStartToEnd

Whether SwipeToDismissBox can be dismissed from start to end.

boolean enableDismissFromEndToStart

Whether SwipeToDismissBox can be dismissed from end to start.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content

The content that can be dismissed.

rememberSwipeToDismissBoxState

@Composable
@ExperimentalMaterial3Api
public static final @NonNull SwipeToDismissBoxState rememberSwipeToDismissBoxState(
    @NonNull SwipeToDismissBoxValue initialValue,
    @NonNull Function1<@NonNull SwipeToDismissBoxValue, @NonNull Boolean> confirmValueChange,
    @NonNull Function1<@NonNull Float, @NonNull Float> positionalThreshold
)

Create and remember a SwipeToDismissBoxState.

Parameters
@NonNull SwipeToDismissBoxValue initialValue

The initial value of the state.

@NonNull Function1<@NonNull SwipeToDismissBoxValue, @NonNull Boolean> confirmValueChange

Optional callback invoked to confirm or veto a pending state change.

@NonNull Function1<@NonNull Float, @NonNull Float> positionalThreshold

The positional threshold to be used when calculating the target state while a swipe is in progress and when settling after the swipe ends. This is the distance from the start of a transition. It will be, depending on the direction of the interaction, added or subtracted from/to the origin offset. It should always be a positive value.