在 Android 导航中,“对话框目的地”一词是指应用导航图中的目的地,以对话框窗口的形式叠加在应用界面元素和内容之上。
由于对话框目的地显示在填充导航宿主的托管目的地之上,因此对于对话框目的地如何与 NavController
的返回堆栈进行互动,有一些重要的注意事项。
对话框可组合项
如需在 Compose 中创建对话框目的地,请使用 dialog()
函数向 NavHost
添加目的地。该函数的行为与 composable()
基本相同,只不过它会创建对话框目的地,而不是托管目的地。
请参考以下示例:
@Composable
fun SettingsDialog(){
Text("Settings")
// ...
}
@Composable
fun MyApp() {
val navController = rememberNavController()
NavHost(navController, startDestination = "home") {
composable("home") { Home(onNavigateToHome = { navController.navigate("home") }) }
dialog("settings") { SettingsDialog(onNavigateToSettingsDialog = { navController.navigate("settings") }) }
}
}
- 起始目的地是
Home
可组合项。由于它使用composable()
,因此它是一个托管目的地。 - 另一个目的地是
SettingsDialog
可组合项。由于dialog()
函数会将其添加到图中,因此它是一个对话框目的地。当用户从Home
导航到SettingsDialog
时,后者会显示在Home
上方。 - 虽然
SettingsDialog
本身不包含Dialog
可组合项,但由于它是对话框目的地,NavHost
会在Dialog
中显示它。
对话框目的地会显示在 NavHost
中的上一个目的地之上。如果对话框代表应用中的单独屏幕,并且该屏幕需要自己的生命周期和已保存状态,且与导航图中的任何其他目的地无关,请使用这些对话框。如果您希望针对不太复杂的提示(例如确认)显示对话框,则可能首选使用 AlertDialog
或相关可组合项。
Kotlin DSL
如果您使用的是 fragment,并且使用 Kotlin DSL 创建图,则添加对话框目的地与使用 Compose 时的操作非常相似。
我们来考虑一下,以下代码段如何还使用 dialog()
函数来添加使用 fragment 的对话框目的地:
// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
startDestination = "home"
) {
// Associate the "home" destination with the HomeFragment.
fragment<HomeFragment>("home") {
label = "Home"
}
// Define the "settings" destination as a dialog using DialogFragment.
dialog<SettingsDialogFragment>("settings") {
label = "Settings Dialog"
}
}
XML
如果您已有 DialogFragment
,请使用 <dialog>
元素将此对话框添加到您的导航图,如以下示例所示:
<?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>