Destinazioni delle finestre di dialogo

Nella navigazione Android, il termine destinazione finestra di dialogo si riferisce alle destinazioni all'interno del grafico di navigazione dell'app, che si presentano come finestre di dialogo che si sovrappongono a contenuti e elementi UI dell'app.

Poiché le destinazioni delle finestre di dialogo vengono visualizzate prima delle destinazioni ospitate che riempiono le host di navigazione, ci sono alcune considerazioni importanti su come le destinazioni interagiscono con il back stack del tuo 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 essenzialmente come composable, crea solo una destinazione della finestra di dialogo anziché un elemento ospitato destinazione.

Considera il seguente esempio:

@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 il percorso Home. Poiché composable() la aggiunge al grafico ed è una destinazione ospitata.
2. L'altra destinazione utilizza il percorso Settings.
   • In modo simile, poiché dialog() lo aggiunge al grafico, si tratta di una finestra di dialogo destinazione.
   • Quando l'utente va da HomeScreen a SettingsScreen, quest'ultimo compare su HomeScreen.
3. Sebbene SettingsScreen non includa un componibile Dialog, poiché è la destinazione della finestra di dialogo, NavHost la visualizza all'interno di una Dialog.

Le destinazioni delle finestre di dialogo vengono visualizzate sopra la destinazione precedente in NavHost. Utilizza le funzionalità di quando la finestra di dialogo rappresenta una schermata separata nell'app che richiede una propria del ciclo di vita e dello stato salvato, indipendentemente da qualsiasi altra destinazione grafico di navigazione. Potresti preferire utilizzare una AlertDialog o una correlata componibile se vuoi una finestra di dialogo per un prompt meno complesso, come conferma.

DSL Kotlin

Se lavori con i frammenti e usi la Kotlin DSL per per creare il grafico, l'aggiunta di una destinazione della finestra di dialogo è molto simile a quando Scrivi.

Considera come nel seguente snippet viene utilizzata anche la funzione dialog() per aggiungi una destinazione della finestra di dialogo che utilizzi 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 hai già una DialogFragment, usa l'elemento <dialog> per aggiungi 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>