Desliza para descartar
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
La animación de deslizar para descartar representa la transición cuando los usuarios navegan a la página anterior.
Los detalles de la animación de deslizar para descartar son similares a los de presionar un botón lateral giratorio (RSB). Tu dedo controla el progreso de la animación hasta un 50%.
Hay una animación adicional en la vista de la app que está vinculada al gesto para descartar. La cantidad de movimiento que se muestra en la vista de la app no es exactamente la misma que la distancia que debe mover el dedo. La vista de la app nunca debe salir del borde de la pantalla, lo que muestra un efecto similar a apretar con cierta resistencia.
Implementación
SwipeDismissableNavHost de la biblioteca de Navigation proporciona el gesto de navegación de deslizar para descartar de forma predeterminada.
Si no usas la biblioteca de Navigation, puedes admitir este gesto de navegación en pantalla completa usando BasicSwipeToDismissBox directamente.
Diseño
Cuando diseñes el gesto de deslizar para descartar la acción, ten en cuenta los siguientes dos principios:
El borde de la pantalla
Ten en cuenta otros elementos de la IU que se pueden deslizar, como las vistas de app paginadas.
Cuando sea posible deslizar para descartar, conserva un 20% del borde de la pantalla a fin de activar ese movimiento.
Consulta este ejemplo de la base de código de Material de Compose para Wear OS para ver un ejemplo de deslizamiento en el borde cuando el contenido se puede desplazar horizontalmente.
El umbral para volver o permanecer en la vista de la app
Si el usuario arrastró el dedo por más del 50% del ancho de la pantalla, la app debería activar el resto de la animación del deslizamiento hacia atrás. Si el porcentaje es menor, la app debería volver a la vista completa de la app.
Si el gesto es rápido, ignora la regla del umbral del 50% y desliza hacia atrás.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Swipe to dismiss\n\n[Swipe to dismiss](/reference/kotlin/androidx/wear/compose/foundation/package-summary#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))\nanimation conveys the transition when users navigate to the previous page.\n\nThe animation details for swipe to dismiss are similar to the RSB press. Your\nfinger controls the progress of the animation up to 50%.\n\nThere is an additional animation on the App View that is linked to the dismiss\ngesture. The amount of movement shown on the app view is not exactly the same as\nthe distance that the finger needs to move. The app view should never leave the\nedge of the screen, displaying a squeeze like effect with some resistance.\n\nImplementation\n--------------\n\n[`SwipeDismissableNavHost`](/reference/kotlin/androidx/wear/compose/navigation/package-summary#SwipeDismissableNavHost(androidx.navigation.NavHostController,kotlin.String,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.navigation.SwipeDismissableNavHostState,kotlin.String,kotlin.Function1))\nfrom the [navigation library](/training/wearables/compose/navigation)\nprovides the swipe-to-dismiss navigation gesture by default.\n\nIf you are not using the navigation library, then you can still support this full\nscreen navigation gesture by using [`BasicSwipeToDismissBox`](/reference/kotlin/androidx/wear/compose/foundation/package-summary#BasicSwipeToDismissBox(androidx.wear.compose.foundation.SwipeToDismissBoxState,androidx.compose.ui.Modifier,kotlin.Any,kotlin.Any,kotlin.Boolean,kotlin.Function2))\ndirectly.\n\nDesign\n------\n\nWhen designing the swipe to dismiss action, keep the following two principles\nin mind:\n\n### Edge of the screen\n\nAccount for other UI elements that are swipable, such as paginated app views.\nWhen swipe to dismiss is possible, reserve 20% of the edge of the screen to\ntrigger that motion.\n\nSee this [example from the Compose Material for Wear OS codebase](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:wear/compose/compose-material/samples/src/main/java/androidx/wear/compose/material/samples/SwipeToDismissBoxSample.kt;l=151)\nfor an example of edge-swiping when the content is horizontally scrollable.\n\n### Threshold to go back or stay on app view\n\nIf the user has dragged their finger across over 50% of the screen width,\nthe app should trigger the rest of the swipe back animation. If it's less than\nthat, the app should snap back to the full app view.\n\nIf the gesture is quick, ignore the 50% threshold rule and swipe back."]]
