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 de boîte de dialogue apparaissent sur des destinations hébergées qui remplissent le de navigation, vous devez tenir compte de certains points importants les destinations 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 :

@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 l'itinéraire Home. En effet, composable() l'ajoute au graphique, 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 boîte de dialogue. vers votre destination.
   • Lorsque l'utilisateur passe de HomeScreen à SettingsScreen, Le second 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 lorsque la boîte de dialogue représente un écran distinct de votre application qui a besoin de sa propre le cycle de vie et l'é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 Ajoutez 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>