Destinos de diálogo

En la navegación de Android, el término destino de diálogo hace referencia a destinos dentro del gráfico de navegación de la app que toman la forma de ventanas de diálogo, que superponen elementos de la IU de la app y contenido.

Debido a que los destinos de diálogo aparecen sobre los destinos alojados que ocupan el host de navegación, hay algunas consideraciones importantes con respecto a cómo los destinos de diálogo interactúan con la pila de actividades de NavController.

Elemento componible de diálogo

Para crear un destino de diálogo en Compose, agrega un destino a tu NavHost con la función dialog(). La función se comporta esencialmente de la misma manera que composable(), solo que crea un destino de diálogo en lugar de un destino alojado.

Consulta el siguiente ejemplo:

@Composable
fun SettingsDialog(){
    Text("Settings")
    // ...
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "home") {
        composable("home") { Home(onNavigateToHome = { navController.navigate("home") }) }
        dialog("settings") { SettingsDialog(onNavigateToSettingsDialog = { navController.navigate("settings") }) }
    }
}

1. El destino de inicio es el elemento Home componible. Debido a que usa composable(), es un destino alojado.
2. El otro destino es el elemento SettingsDialog componible. Como la función dialog() lo agrega al gráfico, es un destino de diálogo. Cuando el usuario navegue de Home a SettingsDialog, este último aparecerá sobre Home.
3. Aunque SettingsDialog no incluye un elemento Dialog componible, como es un destino de diálogo, NavHost lo muestra dentro de un Dialog.

Los destinos de diálogo aparecen sobre el destino anterior en NavHost. Úsalas cuando el diálogo represente una pantalla separada en tu app que necesite su propio ciclo de vida y su propio estado guardado, independientemente de cualquier otro destino en tu gráfico de navegación. Es posible que prefieras usar un elemento AlertDialog o un elemento componible relacionado si quieres un diálogo para un mensaje menos complejo, como una confirmación.

DSL de Kotlin

Si trabajas con fragmentos y usas el DSL de Kotlin para crear tu gráfico, agregar un destino de diálogo es muy similar a cuando usas Compose.

Considera cómo, en el siguiente fragmento, también se usa la función dialog() para agregar un destino de diálogo que usa un fragmento:

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = "home"
) {
    // Associate the "home" destination with the HomeFragment.
    fragment<HomeFragment>("home") {
        label = "Home"
    }

    // Define the "settings" destination as a dialog using DialogFragment.
    dialog<SettingsDialogFragment>("settings") {
        label = "Settings Dialog"
    }
}

XML

Si tienes un DialogFragment existente, usa el elemento <dialog> para agregar el diálogo a tu gráfico de navegación, como se muestra en el siguiente ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav_graph">

...

<dialog
    android:id="@+id/my_dialog_fragment"
    android:name="androidx.navigation.myapp.MyDialogFragment">
    <argument android:name="myarg" android:defaultValue="@null" />
        <action
            android:id="@+id/myaction"
            app:destination="@+id/another_destination"/>
</dialog>

...

</navigation>