Destinations de boîte de dialogue

Dans la navigation Android, le terme destination de boîte de dialogue fait référence aux destinations du graphique de navigation de l'application, qui se présentent sous la forme de fenêtres de dialogue, qui se superposent aux éléments d'interface utilisateur et au contenu de l'application.

Comme les destinations de boîte de dialogue apparaissent sur des destinations hébergées qui remplissent l'hôte de navigation, vous devez tenir compte de certains points importants concernant la façon dont les destinations de boîte de dialogue interagissent avec la Pile "Retour" de NavController.

Composable de boîte de dialogue

Pour créer une destination de boîte de dialogue dans Compose, ajoutez une destination à votre NavHost à l'aide de la fonction dialog(). La fonction se comporte essentiellement de la même manière que composable(), mais elle crée une destination de boîte de dialogue plutôt qu'une destination hébergée.

Prenons l'exemple suivant :

@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. La destination de départ est le composable Home. Comme il utilise composable(), il s'agit d'une destination hébergée.
  2. L'autre destination est le composable SettingsDialog. Étant donné que la fonction dialog() l'ajoute au graphique, il s'agit d'une destination de boîte de dialogue. Lorsque l'utilisateur passe de Home à SettingsDialog, ce dernier apparaît au-dessus de Home.
  3. Bien que SettingsDialog n'inclue pas de composable Dialog lui-même, comme il s'agit d'une destination de boîte de dialogue, NavHost l'affiche dans un Dialog.

Les destinations de boîte de dialogue apparaissent au-dessus de la destination précédente dans NavHost. Utilisez-les lorsque la boîte de dialogue représente un écran distinct de votre application qui a besoin de son propre cycle de vie et de son propre état enregistré, indépendamment de toute autre destination de votre graphique de navigation. Vous pouvez utiliser un AlertDialog ou un composable associé si vous souhaitez qu'une boîte de dialogue s'affiche pour une invite moins complexe, telle qu'une confirmation.

DSL Kotlin

Si vous utilisez des fragments et que vous créez votre graphique à l'aide de DSL Kotlin, l'ajout d'une destination de boîte de dialogue est très semblable à l'utilisation de Compose.

Voyons comment l'extrait de code suivant utilise également la fonction dialog() pour ajouter une destination de boîte de dialogue qui utilise un fragment :

// 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 vous disposez déjà d'un DialogFragment existant, utilisez l'élément <dialog> pour ajouter la boîte de dialogue à votre graphique de navigation, comme illustré dans l'exemple suivant :

<?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>