@SerializableobjectHome@SerializableobjectSettings@ComposablefunHomeScreen(onNavigateToSettings:()->Unit){Column{Text("Home")Button(onClick=onNavigateToSettings){Text("Open settings")}}}// This screen will be displayed as a dialog@ComposablefunSettingsScreen(){Text("Settings")// ...}@ComposablefunMyApp(){valnavController=rememberNavController()NavHost(navController,startDestination=Home){composable<Home>{HomeScreen(onNavigateToSettings={navController.navigate(route=Settings)})}dialog<Settings>{SettingsScreen()}}}
จุดหมายเริ่มต้นใช้เส้นทาง Home เพราะ
composable() เพิ่มลงในกราฟ ซึ่งเป็นปลายทางที่โฮสต์
// Define destinations with serializable classes or objects@SerializableobjectHome@SerializableobjectSettings// 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"}}
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# Dialog destinations\n\nIn Android navigation, the term *dialog destination* refers to destinations\nwithin the app's navigation graph which take the form of dialog windows,\noverlaying app UI elements and content.\n\nBecause dialog destinations appear over [hosted destinations](/guide/navigation/design) that fill the\nnavigation host, there are some important considerations regarding how dialog\ndestinations interact with your [`NavController`'s back stack](/guide/navigation/backstack/dialog).\n| **Note:** Dialog destinations implement the [`FloatingWindow`](/reference/androidx/navigation/FloatingWindow) interface. Your app treats any destination that implements this interface as a dialog destination.\n\nDialog composable\n-----------------\n\nTo create a dialog destination in Compose, add a destination to your `NavHost`\nusing the [`dialog()`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).dialog(kotlin.collections.Map,kotlin.Function1)) function. The function behaves essentially the same as\n[`composable`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).composable(kotlin.collections.Map,kotlin.collections.List,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function2))(), only it creates a dialog destination rather than a [hosted\ndestination](/guide/navigation/design).\n\nConsider the following example: \n\n @Serializable\n object Home\n @Serializable\n object Settings\n @Composable\n fun HomeScreen(onNavigateToSettings: () -\u003e Unit){\n Column {\n Text(\"Home\")\n Button(onClick = onNavigateToSettings){\n Text(\"Open settings\")\n }\n }\n }\n\n // This screen will be displayed as a dialog\n @Composable\n fun SettingsScreen(){\n Text(\"Settings\")\n // ...\n }\n\n @Composable\n fun MyApp() {\n val navController = rememberNavController()\n NavHost(navController, startDestination = Home) {\n composable\u003cHome\u003e { HomeScreen(onNavigateToSettings = { navController.navigate(route = Settings) }) }\n dialog\u003cSettings\u003e { SettingsScreen() }\n }\n }\n\n1. The start destination uses the `Home` route. Because `composable()` adds it to the graph, it is a hosted destination.\n2. The other destination uses the `Settings` route.\n - Similarly, because `dialog()` adds it to the graph, it is a dialog destination.\n - When the user navigates from `HomeScreen` to `SettingsScreen` the latter appears over `HomeScreen`.\n3. Although `SettingsScreen` doesn't include a `Dialog` composable itself, because it is a dialog destination, the `NavHost` displays it within a `Dialog`.\n\nDialog destinations appear over the previous destination in the `NavHost`. Use\nthem when the dialog represents a separate screen in your app that needs its own\nlifecycle and saved state, independent of any other destination in your\nnavigation graph. You might prefer to use an [`AlertDialog`](/jetpack/compose/components/dialog) or related\ncomposable if you want a dialog for a less complex prompt, such as a\nconfirmation.\n| **Note:** Because bottom sheets in Compose are not built on `Dialog`, they need their own destination type. See the [Accompanist Navigation Material\n| documentation](https://google.github.io/accompanist/navigation-material/) for an example implementation.\n\nKotlin DSL\n----------\n\nIf you are working with fragments and you are using the [Kotlin DSL](/guide/navigation/design/kotlin-dsl) to\ncreate your graph, adding a dialog destination is very similar to when using\nCompose.\n\nConsider how in the following snippet also uses the [`dialog()`](/reference/kotlin/androidx/navigation/NavGraphBuilder#(androidx.navigation.NavGraphBuilder).dialog(kotlin.Int)) function to\nadd a dialog destination that uses a fragment: \n\n // Define destinations with serializable classes or objects\n @Serializable\n object Home\n @Serializable\n object Settings\n\n // Add the graph to the NavController with `createGraph()`.\n navController.graph = navController.createGraph(\n startDestination = Home\n ) {\n // Associate the home route with the HomeFragment.\n fragment\u003cHomeFragment, Home\u003e {\n label = \"Home\"\n }\n\n // Define the settings destination as a dialog using DialogFragment.\n dialog\u003cSettingsFragment, Settings\u003e {\n label = \"Settings\"\n }\n }\n\nXML\n---\n\nIf you have an existing [`DialogFragment`](/reference/androidx/fragment/app/DialogFragment), use the `\u003cdialog\u003e` element to\nadd the dialog to your navigation graph, as shown in the following example: \n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cnavigation xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n android:id=\"@+id/nav_graph\"\u003e\n\n...\n\n\u003cdialog\n android:id=\"@+id/my_dialog_fragment\"\n android:name=\"androidx.navigation.myapp.MyDialogFragment\"\u003e\n \u003cargument android:name=\"myarg\" android:defaultValue=\"@null\" /\u003e\n \u003caction\n android:id=\"@+id/myaction\"\n app:destination=\"@+id/another_destination\"/\u003e\n\u003c/dialog\u003e\n\n...\n\n\u003c/navigation\u003e\n```"]]