En la navegación de Android, el término destino de diálogo hace referencia a destinos dentro del gráfico de navegación de la app que adoptan la forma de ventanas de diálogo y superponen elementos y contenido de la IU de la app.
Debido a que los destinos de diálogo aparecen sobre los destinos alojados que ocupan el host de navegación, hay algunas consideraciones importantes sobre cómo los destinos de diálogo interactúan con la pila de actividades de NavController
.
Elemento componible de diálogo
Para crear un destino de diálogo en Compose, agrega un destino al elemento NavHost
con la función dialog()
. La función se comporta, en esencia, de la misma manera que composable
; la única diferencia es que crea un destino de diálogo en lugar de un destino alojado.
Consulta el siguiente ejemplo:
@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() }
}
}
- El destino de inicio usa la ruta
Home
. Comocomposable()
lo agrega al gráfico, es un destino alojado. - El otro destino usa la ruta
Settings
.- Del mismo modo, como
dialog()
lo agrega al gráfico, es un destino del diálogo. - Cuando el usuario navega de
HomeScreen
aSettingsScreen
, este último aparece sobreHomeScreen
.
- Del mismo modo, como
- Aunque
SettingsScreen
no incluye un elementoDialog
componible, ya que es un destino de diálogo, el elementoNavHost
lo muestra dentro de un objetoDialog
.
Los destinos de diálogo aparecen sobre el destino anterior en el elemento NavHost
. Úsalas cuando el diálogo represente una pantalla separada en tu app que necesite su propio ciclo de vida y estado guardado, independientemente de cualquier otro destino en tu gráfico de navegación. Es posible que prefieras usar un elemento AlertDialog
o uno componible relacionado si quieres un diálogo para mostrar un mensaje menos complejo, como una confirmación.
DSL de Kotlin
Si trabajas con fragmentos y usas el DSL de Kotlin para crear tu gráfico, agregar un destino de diálogo es muy similar a cuando usas Compose.
Ten en cuenta cómo, en el siguiente fragmento, también se usa la función dialog()
para agregar un destino de diálogo que usa un fragmento:
// 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 tienes un DialogFragment
existente, usa el elemento <dialog>
para agregar el diálogo a tu gráfico de navegación, como se muestra en el siguiente ejemplo:
<?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>