# SwipeToDismissBox

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)( state: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/SwipeToDismissBoxState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, backgroundScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, backgroundKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, contentKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, hasBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.(isBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` that handles the swipe-to-dismiss gesture. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable [SwipeToDismissBox](https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))( state: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBoxState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, backgroundScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, backgroundKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, contentKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, hasBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.(isBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** This overload is provided for backwards compatibility. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)( onDismissed: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, state: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/SwipeToDismissBoxState, backgroundScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, backgroundKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, contentKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html, hasBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.(isBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` that handles the swipe-to-dismiss gesture. |

## Functions

### SwipeToDismissBox

Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/SwipeToDismissBox.kt+function:SwipeToDismissBox)

```
@Composable
fun SwipeToDismissBox(
    state: SwipeToDismissBoxState,
    modifier: Modifier = Modifier,
    backgroundScrimColor: Color = MaterialTheme.colors.background,
    contentScrimColor: Color = MaterialTheme.colors.background,
    backgroundKey: Any = SwipeToDismissKeys.Background,
    contentKey: Any = SwipeToDismissKeys.Content,
    hasBackground: Boolean = true,
    content: @Composable BoxScope.(isBackground: Boolean) -> Unit
): Unit
```

Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` that handles the swipe-to-dismiss gesture. Takes a single slot for the background (only displayed during the swipe gesture) and the foreground content.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` with stateful composables:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.saveable.rememberSaveableStateHolder
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.SwipeToDismissValue
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.SplitToggleChip
import androidx.wear.compose.material.SwipeToDismissBox
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.ToggleChipDefaults

// State for managing a 2-level navigation hierarchy between
// MainScreen and ItemScreen composables.
// Alternatively, use SwipeDismissableNavHost from wear.compose.navigation.
var showMainScreen by remember { mutableStateOf(true) }
val saveableStateHolder = rememberSaveableStateHolder()

// Swipe gesture dismisses ItemScreen to return to MainScreen.
val state = rememberSwipeToDismissBoxState()
LaunchedEffect(state.currentValue) {
    if (state.currentValue == SwipeToDismissValue.Dismissed) {
        state.snapTo(SwipeToDismissValue.Default)
        showMainScreen = !showMainScreen
    }
}

// Hierarchy is ListScreen -> ItemScreen, so we show ListScreen as the background behind
// the ItemScreen, otherwise there's no background to show.
SwipeToDismissBox(
    state = state,
    hasBackground = !showMainScreen,
    backgroundKey = if (!showMainScreen) "MainKey" else "Background",
    contentKey = if (showMainScreen) "MainKey" else "ItemKey",
) { isBackground ->
    if (isBackground || showMainScreen) {
        // Best practice would be to use State Hoisting and leave this composable stateless.
        // Here, we want to support MainScreen being shown from different destinations
        // (either in the foreground or in the background during swiping) - that can be achieved
        // using SaveableStateHolder and rememberSaveable as shown below.
        saveableStateHolder.SaveableStateProvider(
            key = "MainKey",
            content = {
                // Composable that maintains its own state
                // and can be shown in foreground or background.
                val checked = rememberSaveable { mutableStateOf(true) }
                Column(
                    modifier =
                        Modifier.fillMaxSize().padding(horizontal = 8.dp, vertical = 8.dp),
                    verticalArrangement =
                        Arrangement.spacedBy(4.dp, Alignment.CenterVertically),
                ) {
                    SplitToggleChip(
                        checked = checked.value,
                        label = { Text("Item details") },
                        modifier = Modifier.height(40.dp),
                        onCheckedChange = { v -> checked.value = v },
                        onClick = { showMainScreen = false },
                        toggleControl = {
                            Icon(
                                imageVector =
                                    ToggleChipDefaults.checkboxIcon(checked = checked.value),
                                contentDescription = null,
                            )
                        },
                    )
                }
            },
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Show details here...", color = MaterialTheme.colors.onPrimary)
            Text("Swipe right to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}
```

Example of using `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/edgeSwipeToDismiss.modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.SwipeToDismissBox
import androidx.wear.compose.material.Text

val state = rememberSwipeToDismissBoxState()

// When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
// modifier applies exists within a SwipeToDismissBox which shares the same state.
SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    val horizontalScrollState = rememberScrollState(0)
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                modifier =
                    Modifier.align(Alignment.Center)
                        .edgeSwipeToDismiss(state)
                        .horizontalScroll(horizontalScrollState),
                text =
                    "This text can be scrolled horizontally - to dismiss, swipe " +
                        "right from the left edge of the screen (called Edge Swiping)",
            )
        }
    }
}
```

For more information, see the [Swipe to dismiss](https://developer.android.com/training/wearables/components/swipe-to-dismiss) guide.

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/SwipeToDismissBoxState` | State containing information about ongoing swipe or animation. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for this component. |
| `backgroundScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.background` | Color for background scrim |
| `contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.background` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` used for the scrim over the content composable during the swipe gesture. |
| `backgroundKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html = SwipeToDismissKeys.Background` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/runtime/key.composable#key(kotlin.Array,kotlin.Function0)` which identifies the content currently composed in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` block when isBackground == true. Provide the backgroundKey if your background content will be displayed as a foreground after the swipe animation ends (as is common when `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` is used for the navigation). This allows remembered state to be correctly moved between background and foreground. |
| `contentKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html = SwipeToDismissKeys.Content` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/runtime/key.composable#key(kotlin.Array,kotlin.Function0)` which identifies the content currently composed in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` block when isBackground == false. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`. |
| `hasBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Optional `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` used to indicate if the content has no background, in which case the swipe gesture is disabled (since there is no parent destination). |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.(isBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Slot for content, with the isBackground parameter enabling content to be displayed behind the foreground content - the background is normally hidden, is shown behind a scrim during the swipe gesture, and is shown without scrim once the finger passes the swipe-to-dismiss threshold. |

### SwipeToDismissBox

Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/SwipeToDismissBox.kt+function:SwipeToDismissBox)

```
@Composable
fun [SwipeToDismissBox](https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))(
    state: SwipeToDismissBoxState,
    modifier: Modifier = Modifier,
    backgroundScrimColor: Color = MaterialTheme.colors.background,
    contentScrimColor: Color = MaterialTheme.colors.background,
    backgroundKey: Any = SwipeToDismissKeys.Background,
    contentKey: Any = SwipeToDismissKeys.Content,
    hasBackground: Boolean = true,
    content: @Composable BoxScope.(isBackground: Boolean) -> Unit
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> This overload is provided for backwards compatibility. A newer overload is available that uses androidx.wear.compose.foundation.SwipeToDismissBoxState, use this instead:
>
> ```kotlin
> SwipeToDismissBox(state, modifier, backgroundScrimColor, contentScrimColor, backgroundKey, contentKey,hasBackground, content)
> ```

Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` that handles the swipe-to-dismiss gesture. Takes a single slot for the background (only displayed during the swipe gesture) and the foreground content.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` with stateful composables:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.saveable.rememberSaveableStateHolder
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.SwipeToDismissValue
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.SplitToggleChip
import androidx.wear.compose.material.SwipeToDismissBox
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.ToggleChipDefaults

// State for managing a 2-level navigation hierarchy between
// MainScreen and ItemScreen composables.
// Alternatively, use SwipeDismissableNavHost from wear.compose.navigation.
var showMainScreen by remember { mutableStateOf(true) }
val saveableStateHolder = rememberSaveableStateHolder()

// Swipe gesture dismisses ItemScreen to return to MainScreen.
val state = rememberSwipeToDismissBoxState()
LaunchedEffect(state.currentValue) {
    if (state.currentValue == SwipeToDismissValue.Dismissed) {
        state.snapTo(SwipeToDismissValue.Default)
        showMainScreen = !showMainScreen
    }
}

// Hierarchy is ListScreen -> ItemScreen, so we show ListScreen as the background behind
// the ItemScreen, otherwise there's no background to show.
SwipeToDismissBox(
    state = state,
    hasBackground = !showMainScreen,
    backgroundKey = if (!showMainScreen) "MainKey" else "Background",
    contentKey = if (showMainScreen) "MainKey" else "ItemKey",
) { isBackground ->
    if (isBackground || showMainScreen) {
        // Best practice would be to use State Hoisting and leave this composable stateless.
        // Here, we want to support MainScreen being shown from different destinations
        // (either in the foreground or in the background during swiping) - that can be achieved
        // using SaveableStateHolder and rememberSaveable as shown below.
        saveableStateHolder.SaveableStateProvider(
            key = "MainKey",
            content = {
                // Composable that maintains its own state
                // and can be shown in foreground or background.
                val checked = rememberSaveable { mutableStateOf(true) }
                Column(
                    modifier =
                        Modifier.fillMaxSize().padding(horizontal = 8.dp, vertical = 8.dp),
                    verticalArrangement =
                        Arrangement.spacedBy(4.dp, Alignment.CenterVertically),
                ) {
                    SplitToggleChip(
                        checked = checked.value,
                        label = { Text("Item details") },
                        modifier = Modifier.height(40.dp),
                        onCheckedChange = { v -> checked.value = v },
                        onClick = { showMainScreen = false },
                        toggleControl = {
                            Icon(
                                imageVector =
                                    ToggleChipDefaults.checkboxIcon(checked = checked.value),
                                contentDescription = null,
                            )
                        },
                    )
                }
            },
        )
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Show details here...", color = MaterialTheme.colors.onPrimary)
            Text("Swipe right to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}
```

Example of using `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/edgeSwipeToDismiss.modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.SwipeToDismissBox
import androidx.wear.compose.material.Text

val state = rememberSwipeToDismissBoxState()

// When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
// modifier applies exists within a SwipeToDismissBox which shares the same state.
SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    val horizontalScrollState = rememberScrollState(0)
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                modifier =
                    Modifier.align(Alignment.Center)
                        .edgeSwipeToDismiss(state)
                        .horizontalScroll(horizontalScrollState),
                text =
                    "This text can be scrolled horizontally - to dismiss, swipe " +
                        "right from the left edge of the screen (called Edge Swiping)",
            )
        }
    }
}
```

For more information, see the [Swipe to dismiss](https://developer.android.com/training/wearables/components/swipe-to-dismiss) guide.

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBoxState` | State containing information about ongoing swipe or animation. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for this component. |
| `backgroundScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.background` | Color for background scrim |
| `contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.background` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` used for the scrim over the content composable during the swipe gesture. |
| `backgroundKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html = SwipeToDismissKeys.Background` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/runtime/key.composable#key(kotlin.Array,kotlin.Function0)` which identifies the content currently composed in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` block when isBackground == true. Provide the backgroundKey if your background content will be displayed as a foreground after the swipe animation ends (as is common when `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` is used for the navigation). This allows remembered state to be correctly moved between background and foreground. |
| `contentKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html = SwipeToDismissKeys.Content` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/runtime/key.composable#key(kotlin.Array,kotlin.Function0)` which identifies the content currently composed in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` block when isBackground == false. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(androidx.wear.compose.material.SwipeToDismissBoxState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`. |
| `hasBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Optional `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` used to indicate if the content has no background, in which case the swipe gesture is disabled (since there is no parent destination). |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.(isBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Slot for content, with the isBackground parameter enabling content to be displayed behind the foreground content - the background is normally hidden, is shown behind a scrim during the swipe gesture, and is shown without scrim once the finger passes the swipe-to-dismiss threshold. |

### SwipeToDismissBox

Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/SwipeToDismissBox.kt+function:SwipeToDismissBox)

```
@Composable
fun SwipeToDismissBox(
    onDismissed: () -> Unit,
    modifier: Modifier = Modifier,
    state: SwipeToDismissBoxState = androidx.wear.compose.foundation.rememberSwipeToDismissBoxState(),
    backgroundScrimColor: Color = MaterialTheme.colors.background,
    contentScrimColor: Color = MaterialTheme.colors.background,
    backgroundKey: Any = SwipeToDismissKeys.Background,
    contentKey: Any = SwipeToDismissKeys.Content,
    hasBackground: Boolean = true,
    content: @Composable BoxScope.(isBackground: Boolean) -> Unit
): Unit
```

Wear Material `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` that handles the swipe-to-dismiss gesture. This overload takes an `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` parameter which is used to execute a command when the swipe to dismiss has completed, such as navigating to another screen.

Example of a simple SwipeToDismissBox:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.SwipeToDismissBox
import androidx.wear.compose.material.Text

val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Column(
            modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Swipe right to dismiss", color = MaterialTheme.colors.onPrimary)
        }
    }
}
```

Example of using `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/edgeSwipeToDismiss.modifier#(androidx.compose.ui.Modifier).edgeSwipeToDismiss(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.unit.Dp)` with `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberScrollState
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.foundation.rememberSwipeToDismissBoxState
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.SwipeToDismissBox
import androidx.wear.compose.material.Text

val state = rememberSwipeToDismissBoxState()

// When using Modifier.edgeSwipeToDismiss, it is required that the element on which the
// modifier applies exists within a SwipeToDismissBox which shares the same state.
SwipeToDismissBox(state = state, onDismissed = navigateBack) { isBackground ->
    val horizontalScrollState = rememberScrollState(0)
    if (isBackground) {
        Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
    } else {
        Box(modifier = Modifier.fillMaxSize()) {
            Text(
                modifier =
                    Modifier.align(Alignment.Center)
                        .edgeSwipeToDismiss(state)
                        .horizontalScroll(horizontalScrollState),
                text =
                    "This text can be scrolled horizontally - to dismiss, swipe " +
                        "right from the left edge of the screen (called Edge Swiping)",
            )
        }
    }
}
```

For more information, see the [Swipe to dismiss](https://developer.android.com/training/wearables/components/swipe-to-dismiss) guide.

| Parameters |
|---|---|
| `onDismissed: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Executes when the swipe to dismiss has completed. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for this component. |
| `state: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/SwipeToDismissBoxState = androidx.wear.compose.foundation.rememberSwipeToDismissBoxState()` | State containing information about ongoing swipe or animation. |
| `backgroundScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.background` | Color for background scrim |
| `contentScrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.background` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` used for the scrim over the content composable during the swipe gesture. |
| `backgroundKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html = SwipeToDismissKeys.Background` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/runtime/key.composable#key(kotlin.Array,kotlin.Function0)` which identifies the content currently composed in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` block when isBackground == true. Provide the backgroundKey if your background content will be displayed as a foreground after the swipe animation ends (as is common when `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToDismissBox.composable#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` is used for the navigation). This allows remembered state to be correctly moved between background and foreground. |
| `contentKey: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html = SwipeToDismissKeys.Content` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/runtime/key.composable#key(kotlin.Array,kotlin.Function0)` which identifies the content currently composed in the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)` block when isBackground == false. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToDismissBox(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2)`. |
| `hasBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Optional `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html` used to indicate if the content has no background, in which case the swipe gesture is disabled (since there is no parent destination). |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/BoxScope.(isBackground: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Slot for content, with the isBackground parameter enabling content to be displayed behind the foreground content - the background is normally hidden, is shown behind a scrim during the swipe gesture, and is shown without scrim once the finger passes the swipe-to-dismiss threshold. |