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.

Étant donné que les destinations des boîtes de dialogue apparaissent sur les destinations hébergées qui remplissent l'hôte de navigation, il existe des considérations importantes concernant la façon dont les destinations des boîtes de dialogue interagissent avec la pile "Retour" de votre 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 :

@Serializable
object Home
@Serializable
object Settings
@Composable
fun HomeScreen(onNavigateToSettings: () -> Unit){
    Column {
        Text("Home")
        Button(onClick = onNavigateToSettings){
            Text("Open settings")
        }
    }
}

// This screen will be displayed as a dialog
@Composable
fun SettingsScreen(){
    Text("Settings")
    // ...
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = Home) {
        composable<Home> { HomeScreen(onNavigateToSettings = { navController.navigate(route = Settings) }) }
        dialog<Settings> { SettingsScreen() }
    }
}

1. La destination de départ utilise la route Home. Comme composable() l'ajoute au graphe, il s'agit d'une destination hébergée.
2. L'autre destination utilise la route Settings.
   • De même, comme dialog() l'ajoute au graphique, il s'agit d'une destination de boîte de dialogue.
   • Lorsque l'utilisateur passe de HomeScreen à SettingsScreen, ce dernier apparaît sur HomeScreen.
3. Bien que SettingsScreen 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 :

// Define destinations with serializable classes or objects
@Serializable
object Home
@Serializable
object Settings

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

    // Define the settings destination as a dialog using DialogFragment.
    dialog<SettingsFragment, Settings> {
        label = "Settings"
    }
}

XML

Si vous disposez déjà d'un DialogFragment, 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>