ในการนำทางของ Android คำว่าปลายทางของกล่องโต้ตอบหมายถึงปลายทาง ภายในกราฟการนำทางของแอป ซึ่งจะอยู่ในรูปแบบของหน้าต่างกล่องโต้ตอบ วางซ้อนองค์ประกอบและเนื้อหา UI ของแอป
เนื่องจากปลายทางของกล่องโต้ตอบปรากฏเหนือปลายทางที่โฮสต์ซึ่งเติมข้อมูลใน
โฮสต์การนำทาง มีสิ่งสำคัญบางอย่างที่ควรพิจารณาเกี่ยวกับ
ปลายทางโต้ตอบกับแบ็กสแต็กของ NavController
กล่องโต้ตอบที่ประกอบกันได้
หากต้องการสร้างปลายทางของกล่องโต้ตอบใน "เขียน" ให้เพิ่มปลายทางไปยัง NavHost
โดยใช้ฟังก์ชัน dialog()
โดยหลักแล้ว ฟังก์ชันนี้ทำงานเหมือนกับ
composable
เพียงแต่โปรแกรมจะสร้างปลายทางของกล่องโต้ตอบ ไม่ใช่โฮสต์
ปลายทาง
ลองดูตัวอย่างต่อไปนี้
@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() }
}
}
- จุดหมายเริ่มต้นใช้เส้นทาง
Home
เพราะcomposable()
เพิ่มลงในกราฟ ซึ่งเป็นปลายทางที่โฮสต์ - จุดหมายอีกแห่งหนึ่งใช้เส้นทาง
Settings
- ในทำนองเดียวกัน เนื่องจาก
dialog()
เพิ่มข้อมูลลงในกราฟ จึงเป็นกล่องโต้ตอบ ปลายทาง - เมื่อผู้ใช้นำทางจาก
HomeScreen
ไปยังSettingsScreen
รายการหลังปรากฏมากกว่าHomeScreen
- ในทำนองเดียวกัน เนื่องจาก
- แม้ว่า
SettingsScreen
จะไม่มีDialog
Composable แต่ เนื่องจากเป็นปลายทางของกล่องโต้ตอบNavHost
จะแสดง URL ภายในDialog
ปลายทางกล่องโต้ตอบจะปรากฏเหนือปลายทางก่อนหน้าใน NavHost
ใช้
เมื่อกล่องโต้ตอบแสดงหน้าจอแยกต่างหากในแอปของคุณ ซึ่งจำเป็นต้องมีหน้าจอแยกต่างหาก
วงจรและสถานะที่บันทึกไว้ โดยไม่เกี่ยวข้องกับปลายทางอื่นๆ ใน
กราฟการนำทาง คุณอาจต้องการใช้ AlertDialog
หรือสิ่งที่เกี่ยวข้อง
Composable ถ้าคุณต้องการกล่องโต้ตอบสำหรับพรอมต์ที่ซับซ้อนน้อยกว่า เช่น
ยืนยัน
Kotlin DSL
หากคุณทำงานกับ Fragment และกำลังใช้ Kotlin DSL เพื่อ การสร้างกราฟ การเพิ่มปลายทางของกล่องโต้ตอบจะคล้ายกันมากกับเมื่อใช้ เขียน
ลองดูว่าในข้อมูลโค้ดต่อไปนี้ใช้ฟังก์ชัน dialog()
เพื่อทำสิ่งต่อไปนี้อย่างไร
เพิ่มปลายทางของกล่องโต้ตอบที่ใช้ส่วนย่อย:
// 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
หากคุณมี 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>