Destinazioni delle finestre di dialogo

Nella navigazione di Android, il termine destinazione della finestra di dialogo si riferisce alle destinazioni all'interno del grafico di navigazione dell'app che assumono la forma di finestre di dialogo e si sovrappongono a contenuti e elementi dell'interfaccia utente dell'app.

Poiché le destinazioni delle finestre di dialogo vengono visualizzate sopra le destinazioni ospitate che riempiono l'host di navigazione, è necessario considerare alcune importanti considerazioni sul modo in cui le destinazioni delle finestre di dialogo interagiscono con lo stack posteriore di NavController.

Finestra di dialogo componibile

Per creare una destinazione per la finestra di dialogo in Compose, aggiungi una destinazione a NavHost utilizzando la funzione dialog(). La funzione si comporta sostanzialmente come composable, ma crea una destinazione della finestra di dialogo anziché una destinazione ospitata.

Considera l'esempio seguente:

@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 destinazione di partenza utilizza la route Home. Poiché composable() lo aggiunge al grafico, è una destinazione ospitata.
2. L'altra destinazione utilizza la route Settings.
   • Allo stesso modo, poiché dialog() la aggiunge al grafico, è la destinazione di una finestra di dialogo.
   • Quando l'utente passa da HomeScreen a SettingsScreen, il secondo viene visualizzato sopra HomeScreen.
3. Anche se SettingsScreen non include un elemento componibile Dialog in sé, poiché è una destinazione di finestra di dialogo, NavHost lo visualizza all'interno di Dialog.

Le destinazioni delle finestre di dialogo vengono visualizzate sopra la destinazione precedente in NavHost. Utilizzale quando la finestra di dialogo rappresenta una schermata separata nell'app che necessita di un proprio ciclo di vita e di stato salvato, indipendentemente da qualsiasi altra destinazione nel grafico di navigazione. Ti consigliamo di utilizzare un elemento AlertDialog o un componibile correlato se vuoi una finestra di dialogo per un prompt meno complesso, come una conferma.

DSL Kotlin

Se stai lavorando con i frammenti e stai utilizzando Kotlin DSL per creare il grafico, l'aggiunta di una destinazione della finestra di dialogo è molto simile all'utilizzo di Scrivi.

Considera come nel seguente snippet viene utilizzata anche la funzione dialog() per aggiungere una destinazione di finestra di dialogo che utilizza un frammento:

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

Se esiste già un elemento DialogFragment, utilizza l'elemento <dialog> per aggiungere la finestra di dialogo al grafico di navigazione, come mostrato nell'esempio seguente:

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