Tujuan dialog

Dalam navigasi Android, istilah tujuan dialog mengacu pada tujuan dalam grafik navigasi aplikasi yang berbentuk jendela dialog, yang menempatkan elemen dan konten UI aplikasi.

Karena tujuan dialog muncul di atas tujuan yang dihosting yang mengisi host navigasi, ada beberapa pertimbangan penting mengenai cara tujuan dialog berinteraksi dengan data sebelumnya NavController.

Composable dialog

Untuk membuat tujuan dialog di Compose, tambahkan tujuan ke NavHost menggunakan fungsi dialog(). Fungsi ini pada dasarnya berperilaku sama seperti composable, hanya saja fungsi ini membuat tujuan dialog, bukan tujuan yang dihosting.

Perhatikan contoh berikut:

@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. Tujuan awal menggunakan rute Home. Karena composable() menambahkannya ke grafik, objek ini akan menjadi tujuan yang dihosting.
  2. Tujuan lainnya menggunakan rute Settings.
    • Demikian pula, karena dialog() menambahkannya ke grafik, ini adalah tujuan dialog.
    • Saat pengguna menavigasi dari HomeScreen ke SettingsScreen, yang terakhir akan muncul di atas HomeScreen.
  3. Meskipun SettingsScreen tidak menyertakan composable Dialog itu sendiri, karena merupakan tujuan dialog, maka NavHost menampilkannya dalam Dialog.

Tujuan dialog muncul di atas tujuan sebelumnya di NavHost. Gunakan saat dialog ini mewakili layar terpisah di aplikasi Anda yang memerlukan siklus proses dan tersimpannya sendiri, terlepas dari tujuan lain dalam grafik navigasi. Anda mungkin lebih memilih menggunakan AlertDialog atau composable terkait jika menginginkan dialog untuk perintah yang tidak terlalu rumit, seperti konfirmasi.

DSL Kotlin

Jika Anda menangani fragmen dan menggunakan DSL Kotlin untuk membuat grafik, penambahan tujuan dialog sangat mirip dengan saat menggunakan Compose.

Perhatikan cara dalam cuplikan berikut juga menggunakan fungsi dialog() untuk menambahkan tujuan dialog yang menggunakan fragmen:

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

Jika Anda sudah memiliki DialogFragment, gunakan elemen <dialog> untuk menambahkan dialog ke grafik navigasi, seperti yang ditunjukkan dalam contoh berikut:

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